Question

我正在努力解决问题。我有一个常规名单。在li中，我有一个重叠的div，女巫出现在悬停中。问题是，悬停总是与下一个li重叠。我怎样才能实现，下一个李的内容仍然低于悬停的div。 Html和CSS似乎堆叠了li？这是一个已知的问题吗？

我已经尝试过z-index，但这对子元素不起作用。

无法添加完整代码，但这基本上显示了它。为什么下一个li元素总是与最后一个元素重叠？我该如何解决这个问题？

li {
  position: relative;
  width: 100px;
}

img {
  width: 120%;
  height: auto;
  position: absolute;
  top: 0;
  border: 1px solid red;
}

<ul>
 <li style="z-index:1;"><!-- list-element 1 -->
  <div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
 </li>
 <li style="z-index:1;"><!-- list-element 2 -->
  <div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
 </li>
 <li style="z-index:1;"><!-- list-element 3 -->
  <div style="z-index:4;"><img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /></div>
 </li>
</ul>

谢谢

Answer 1

将样式从img移动到父div并给它一个类。同时将div的背景设置为绝对白色

Answer 2

/ *编辑：我的错误 - 我误解了你的问题。 * /

在.img-wrapper上进行定位。（代码段也在下面更新）

看到这个小提琴：https://jsfiddle.net/tqtveoau/4/

/ * END EDIT * /

我猜这不是你的生产代码，但总是尝试使用你的风格的类。

＆＃13;
＆＃13;
.list-item { position: relative; width: 100px; } .img-wrapper { display: none; position: absolute; top: 0; z-index: 1; } .img-wrapper img { width: 120%; border: 1px solid red; } .list-item:hover .img-wrapper { display: block; }
＆＃13;
<ul> <li class="list-item"> List Item <div class="img-wrapper"> <img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /> </div> </li> <li class="list-item"> List Item <div class="img-wrapper"> <img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /> </div> </li> <li class="list-item"> List Item <div class="img-wrapper"> <img src="http://img.brothersoft.com/screenshots/softimage/f/free_cat_wallpaper-407575-1285474870.jpeg" style="width:100%;" /> </div> </li> </ul>
＆＃13;
＆＃13;
＆＃13;

请看这里的小提琴： https://jsfiddle.net/tqtveoau/3/

关于li的内容的HTML列表和z-index

2 个答案: