脚本宝典收集整理的这篇文章主要介绍了解决CSS中子元素z-index与父元素兄弟节点的层级问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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手动设置每一个弹出框的定位。

到此这篇关于解决CSS中子元素z-index与父元素兄弟节点的层级问题的文章就介绍到这了,更多相关css z-index层级内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的解决CSS中子元素z-index与父元素兄弟节点的层级问题全部内容，希望文章能够帮你解决解决CSS中子元素z-index与父元素兄弟节点的层级问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。