absolute和relative元素层级问题

最新推荐文章于 2024-03-18 17:20:19 发布

爱你小前端

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量536

点赞数

文章标签： javascript 前端 react.js 开发语言

本文链接：https://blog.csdn.net/qq_36154157/article/details/132780453

版权

文章讨论了CSS中absolute和relative布局的层级问题，指出脱离文档流并不决定层级，真正的层级由z-index决定。设置了z-index后，即使relative元素也能覆盖absolute元素。

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

布局层级问题

同一个父元素的两个子元素，一个是absolute布局，一个是relative布局，为啥relative元素在absolute元素的背景色之上？

实例：

    <div id="father">
      father
      <div id="c1">c1-absolute</div>
      <div id="c2">c2-relative</div>
    </div>

对应的样式

      #father {
        position: relative;
      }
      #c1 {
        position: absolute;
        background-color: red;
        top: 0px;
        left: 0px;
        height: 250px;
        width: 250px;
      }
      #c2 {
        position: relative;
        height: 200px;
        width: 200px;
        background-color: yellow;
      }

展示结果
在这里插入图片描述

疑惑🤔

relative元素未脱离文档流，而absolute元素脱离了文档流，那么不应该脱离文档流的拥有更高的层级吗？

解答：

层级z-index和是否脱离文档流无关，子元素2为relative，可以设定z-index。如果不设定的话，按照先后顺序，子元素2在子元素1后面出现，层级就比子元素1高

验证

如果要确保子元素1覆盖在子元素2之上，可以给子元素1添加一个更高的z-index值
这样子元素1就会覆盖在子元素2的上方

     #father {
        position: relative;
      }
      #c1 {
        position: absolute;
        background-color: red;
        top: 0px;
        left: 0px;
        height: 250px;
        width: 250px;
        z-index:2;
      }
      #c2 {
        position: relative;
        height: 200px;
        width: 200px;
        background-color: yellow;
        z-index:1;
      }