html标签层级节点，解决CSS中⼦元素z-index与⽗元素兄弟节
点的层级问题_CSS教。。。
1.问题的出现
写了⼀个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的⽬标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展⽰。
元素的结构⼤致如下：
列表项1
弹出框1
列表项2
列表项3
弹出框3
部分样式如下：
.unit{
position: relative；
z-index: 1;
}
手机上可以打html与css的app
.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层级内容请搜索w3xue以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持w3xue！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。