子元素比父元素 z-index高低的问题

最新推荐文章于 2023-07-07 16:27:07 发布

悠悠~飘

最新推荐文章于 2023-07-07 16:27:07 发布

阅读量2k

点赞数 2

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_48813932/article/details/131520587

版权

css 专栏收录该内容

2 篇文章

订阅专栏

文章解释了在CSS中，当父元素设置为relative和z-index:0时，子元素的绝对定位可能会低于父元素的兄弟元素。原因是它们处于同一堆叠上下文，层级由文档流顺序决定。默认不设置父元素的z-index时，子元素可通过设置高z-index值覆盖父元素。z-index需配合position使用才能生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.大坑---设置父relative z-index:0

.parent {
  position: relative;
  z-index:0;
}
.child {
  position: absolute;
  z-index:9999;
}

子元素居然比父元素的兄弟元素低一个层级！

原因：

当你将父元素的 position 属性设置为 relative 并且 z-index 属性设置为 0 时，子元素无论尺寸大小如何都会处于父元素的后面。这是因为在这种情况下，父元素和子元素处于同一个堆叠上下文中，并且父元素的 z-index 值是 0。

根据 CSS 规范，如果一个元素具有相对定位 (position: relative) 且 z-index 值为 0，那么该元素及其子元素的层级关系是相对于它们在文档流中的顺序决定的。也就是说，无论子元素的尺寸大小如何，它们都会位于父元素的后面。

在文档流中，元素的布局和定位是相对于其前面的兄弟元素和父元素进行的。每个元素都占据一定的空间，并按照其在文档中出现的顺序进行布局。后面的元素会被放置在前面的元素之后。

二.默认不设置父的z-index则z-index：auto

.parent {
  position: relative;
  z-index:auto; //默认
}
.child {
  position: absolute;
  z-index:9999;
}

默认情况下，父级元素的 z-index 属性值是 auto，而子元素的 z-index 属性值是 0。这意味着子元素的层级与父级元素的层级相同。

然而，子元素可以通过显式地设置比父级元素更高的 z-index 值来使自己处于父级元素之上。这是因为 z-index 属性控制了元素的堆叠顺序，而不仅仅是元素的父子关系。

当一个元素的 z-index 值比其他元素的 z-index 值更高时，它就会出现在堆叠上下文的较高层级，覆盖位于较低层级的元素。这不仅适用于父子元素关系，也适用于兄弟元素关系。

所以，即使默认情况下父级元素的 z-index 值较低，子元素仍可以通过设置更高的 z-index 值而出现在父级元素之上。

需注意：

为了正常工作，z-index 属性需要与元素的 position 属性一起使用。只有当元素的 position 属性值是 relative、absolute 或 fixed 时，z-index 才会生效