1. 问题的出现
写了一个平铺的列表,其中有些列表项具有 hover 出现的弹出框。希望达成的目标是弹出框展现时,要把列表项内容遮盖住,以保证弹出框内容优先展示。
元素的结构大致如下:
<div class="list">
<div class="unit">
<div class="content"> 列表项 1 </div>
<div class="hover"> 弹出框 1 </div>
</div>
<div class="unit">
<div class="content"> 列表项 2 </div>
</div>
<div class="unit">
<div class="content"> 列表项 3 </div>
<div class="hover"> 弹出框 3 </div>
</div>
</div>
部分样式如下:
.unit{
position: relative;z-index: 1;
}
.hover{
position: absolute;
z-index: 10;
}
实际效果如下:
列表项 1 的弹出框虽然可以遮盖住自身的内容,却无法遮盖住列表项 2 的内容。
2. 原理
看起来,弹出框的 z -index 值是大于列表项父元素的 z -index 值(包括兄弟元素的),所以应该会把所有列表项的内容都遮盖住才对。
但是,实际上,这里我忽略了一个最基本的点。因为弹出框是列表项的子元素,所以其 z -index 值的大小,仅仅跟弹出框的兄弟元素对比才有意义。而对于与父元素(列表项)内容的层级,应该看父元素的层级关系。
我们可以想象为,每一个列表项,是一个平行世界,一个平行世界内部设置的 z -index,只有跟这个世界内部的其它内容比较起来才有意义,你要跟别的平行世界去比较,那对不起,这玩意有次元压制。如果另一个平行世界的层级比你这个世界高,你自己的 z -index 设置的再高,那也是内部称霸王,再高也不会超过另一个世界的地板高。
在上边的示例中,虽然所有的列表项 z -index 都设置为了 1,但是根据出现顺序,由于第二个列表项的层级关系会比第一个高,因此,列表项 1 的所有内容都会被列表项 2 遮盖。
3. 解决方案
目前能想到的解决方案就是将弹出框和列表项设为平级(变为兄弟元素),让弹出框的 z -index 值大于列表项的 z -index,另外 js 手动设置每一个弹出框的定位。
如果还有其它解决方案,可以留言一起讨论。