z索引不适用于相对位置

阿克沙玛

我为这个问题制造了一个小提琴（但是他们也希望我在这里发布代码：/）。我希望“ hero” div悬停在另一个（重叠）的顶部。但是它正在转移其他参数，我给它提供了很高的z索引和相对位置，但还是一无所获。也有人可以告诉我如何在悬停时从div的background属性中删除线性渐变，而无需在：hover中再次指定背景。

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
  position: relative !important;
  z-index: 0;
}

.hero {
  height: 100%;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 20%;
  display: inline-block;
  z-index: 0;
  position: relative !important;
}

#first {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  z-index: 1000 !important;
  width: 27vw;
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first"></div>
  <div class="hero" id="second"></div>
  <div class="hero" id="third"></div>
  <div class="hero" id="fourth"></div>
</div>

https://jsfiddle.net/aks30498/8waty2m9/27/

陪同Afif

渐变和图像使用相同的背景属性设置，因此您无法使用进行处理z-index。您可以更改background-size以便在悬停时隐藏渐变。然后，您可以依靠比例变换使图像更大并与其他图像重叠：

我删除了不必要的代码

.holder {
  margin-top: 10vh;
  margin-left: 10vw;
  width: 90vw;
  height: 90vh;
}

.hero {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 20%;
  display: inline-block;
}

#first {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg');
}

#second {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg');
}

#third {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg');
}

#fourth {
  background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg');
}

.hero:hover {
  background-size: 0 0, cover;
  transform:scale(1.4);
  cursor: pointer;
}

<div class="holder">
  <div class="hero" id="first">

  </div>
  <div class="hero" id="second">

  </div>
  <div class="hero" id="third">

  </div>
  <div class="hero" id="fourth">

  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。