Html 带引导img响应类的悬停z索引

我是新手。我正在建立一个网站，在这个网站上我显示重叠的图像。因此，我在悬停时使用z索引，以便悬停时后面的图像向前显示。然而，我也在使用引导和img响应标签，当我悬停时，图像会闪烁然后消失。我怎样才能解决这个问题？是否可以只使用HTML/CSS而不使用Java来处理此问题

#容器1{
位置：绝对位置；
最高：25%；
左：35%；
}
#容器1图像：悬停{
z指数：3；
位置：绝对位置；
}
#集装箱2{
位置：绝对位置；
最高：30%；
左：25%；
}
#集装箱2 img：悬停{
z指数：2；
位置：绝对位置；
}
#集装箱3{
位置：绝对位置；
最高：45%；
左：40%；
}
#容器3图像：悬停{
z指数：1；
位置：绝对位置；
}

切换导航

我在那里

图像闪烁的原因是，您正在将图像设置为悬停时的绝对位置，并且默认情况下图像具有静态位置

如果从一开始就将所有图像设置为相对位置，并删除悬停时的“位置”属性，则该操作将有效。在图像上不需要绝对位置，因为它位于父容器上。（除非你想做更多我不知道的事情）

希望这有帮助：）

---

你能提供一个片段吗？太棒了！谢谢你的帮助。你能解释一下什么是静态位置，或者为什么会这样吗？没问题！静态位置只是每个HTML块的默认位置。就像有一个默认的字体大小和颜色。换句话说，使用positionstatic将按照HTML块在文档/代码中的显示顺序放置HTML块。当您说div应该在悬停时具有绝对位置时，它必须从静态更改为绝对位置，这导致了闪烁效果。我希望这是可以理解的，@luwe2008:）

#container1 img, #container2 img, #container3 img{
  position: relative; /* Added this */
  border: 1px solid red;
}
#container1 {
  position: absolute;
  top: 25%;
  left: 35%;
}
#container1 img:hover {
  z-index: 3;
  /* Removed: position: absolute; */
}
#container2 {
  position: absolute;
  top: 30%;
  left: 25%;
}
#container2 img:hover {
  z-index: 2;
}
#container3 {
  position: absolute;
  top: 45%;
  left: 40%;
}
#container3 img:hover {
  z-index: 1;
}