css中，子元素的z-index和父元素的兄弟节点的问题

时间：2023-03-30 22:33:43 CSS

1。问题的出现是写一个平铺的列表，部分列表项hover时出现弹框。期望的目标是在弹出框显示的时候覆盖列表项的内容，从而保证弹出框的内容先显示出来。元素的结构大致如下：listitem1

popup框1

列表项2

ListItem3弹出框3部分样式如下：.unit{position:relative;z-index:1;}.hover{位置:绝对;z-index:10;}实际效果如下：listitem1的弹出框虽然可以覆盖自己的内容，但是不能覆盖listitem2的内容。2.原理z-index好像是弹出框的值大于列表项父元素（包括兄弟元素）的z-index值，因此应该覆盖所有列表项的内容。然而，实际上，我在这里忽略了一个最基本的点。因为popover是列表项的子元素，所以它的z-index值只有在与其兄弟元素比较时才有意义。至于与父元素（列表项）内容的层次关系，则要看父元素的层次关系。我们可以把每一个列表项想象成一个平行世界，平行世界里面设置的z-index只有和这个世界的其他内容比较才有意义。如果要拿它和其他平行世界比的话，那不好意思，这东西有次元压制。如果另一个平行世界的等级比你高，你自己的z-index设置的再高也是里面的王者，再高也不会超过平行世界的层高另一个世界。在上面的例子中，虽然所有列表项的z-index都设置为1，但是按照出现的先后顺序，由于第二个列表项的层级会比第一个更高，所以列表项1的所有内容都会是Listitem2有阴影。3、解决方案目前能想到的解决方案是将弹出框和列表项设置在同一层级（成为兄弟元素），使弹出框的z-index值大于列表项的z-index，js手动设置每个popup的定位。如果还有其他解决方案，欢迎留言一起讨论。

上一篇：一个前端的自我修养

下一篇：日常练习：用css画图形，菱形，四个三角形，实心圆，空心圆

css中，子元素的z-index和父元素的兄弟节点的问题相关文章