Question

所以我做了大约2个小时的关于这个主题的研究，我找到的所有答案都让我无法理解或无法回答。所以我提出了这个话题。

所以我遇到的问题如下：

由于HTML / CSS的工作方式，某些元素在悬停时使用z-index无法相互放置。由于这种情况，我不认为我可以修改我的HTML以避免这种情况。当我盘旋时，我需要3个元素才能相互叠加。我使用:hover {z-index:1000}，但这根本没有效果。我不知道为什么。

我将发布我的代码，以便您可以诊断导致此问题的原因，或者让我知道我做错了，因为z-index在这种情况下不起作用，我需要做其他事情。< / p>

现在，澄清： Z-index在这种情况下对我不起作用，如何才能获得相同的效果或修复某些东西以使其正常工作，我可以使用JavaScript或jQuery来修复此？

.banner-container {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.four.columns {
  position: relative;
  left: 13%;
  transform: translateX(-25%);
  border: 5px solid #f2f5f8;
  border-radius: 6px;
}
#image-port {
  position: absolute;
  top: 550px;
}
#banner1 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  -webkit-transition: width 0s, height 0s;
  /* Safari */
  transition: width 0s, height 0s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 0;
}
#banner1:hover {
  position: absolute;
  width: auto;
  height: 125%;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: width 0.5s, height 0.5s;
  /* Safari */
  transition: width 0.5s, height 0.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 1000;
  margin-top: -21px;
  border: 5px solid #f2f5f8;
  border-radius: 6px;
  box-sizing: border-box;
}
#banner2 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  -webkit-transition: width 0s, height 0s;
  /* Safari */
  transition: width 0s, height 0s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 0;
}
#banner2:hover {
  position: absolute;
  width: auto;
  height: 125%;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: width 0.5s, height 0.5s;
  /* Safari */
  transition: width 0.5s, height 0.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 1000;
  margin-top: -21px;
  border: 5px solid #f2f5f8;
  border-radius: 6px;
  box-sizing: border-box;
}
#banner3 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  -webkit-transition: width 0s, height 0s;
  /* Safari */
  transition: width 0s, height 0s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 0;
}
#banner3:hover {
  position: absolute;
  width: auto;
  height: 125%;
  overflow: visible;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transition: width 0.5s, height 0.5s;
  /* Safari */
  transition: width 0.5s, height 0.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  z-index: 1000;
  margin-top: -21px;
  border: 5px solid #f2f5f8;
  border-radius: 6px;
  box-sizing: border-box;
}

<div class="ten columns" id="image-port">
  <div class="four columns">
    <div class="banner-container">
      <img src="images/banners/1.png" id="banner1">
    </div>
  </div>
  <div class="four columns">
    <div class="banner-container">
      <img src="images/banners/2.png" id="banner2">
    </div>
  </div>
  <div class="four columns">
    <div class="banner-container">
      <img src="images/banners/3.png" id="banner3">
    </div>
  </div>
</div>

Answer 1

对于读者来说，图像在悬停时并没有上升到顶部，因为他们的祖父母部门都被定位并给出了堆叠背景。将鼠标悬停在图像上会在祖父母的上下文中更改其z-index，而不会更改父母本身的z位置。

使用CSS规则

不向祖父提供堆叠上下文

.four.column { z-index: auto}

似乎可以解决问题。

当Z-Index不工作时，强制元素高于另一个？

1 个答案: