CSS层叠规则解析

最新推荐文章于 2025-04-29 22:55:59 发布

wen_文文

最新推荐文章于 2025-04-29 22:55:59 发布

阅读量844

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/zhangwen809877665/article/details/118116094

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS3中的层叠上下文和z-index属性，揭示了它们如何影响元素在页面上的堆叠顺序。内容包括层叠上下文的创建条件，z-index:auto和z-index:0的区别，以及层叠水平的决定因素。通过实例分析，展示了不同设置下图片的显示效果，帮助理解CSS3定位和层级显示的复杂性。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: blue;
      /* 使box具有层叠上下文属性 */
      transform: scale(1);    
    }
    .box >img {
      position: relative;
      z-index: -1;
      right: -50px;
    }
  </style>
</head>
<body>

  <!-- 
      1. z-index为负值的显示：
        当box具有层叠上下文属性时，img会显示在蓝色背景上；
        当box不具有层叠上下文属性时； 蓝色背景会显示在img上；因为此时box是block元素；
    -->
  <!-- <div class="box">
    <img src="./img/001.jpg" alt="">
  </div> -->

  <!-- 
      2. z-index= auto/0的区别：
        a.  z-index=auto不创建层叠上下文，是普通元素; 所以直接比较img自身的z-index属性，大的先显示，
            即001.jpg会覆盖在002.jpg图片上
        b.  z-index=0 会创建层叠上下文，所以此时比较的层叠规则发生了变化；
            先比较父元素的层叠顺序，发现相同，再遵循后来居上的准则，002.jpg会显示再001.jpg的上面；
  -->
  <!-- <div style="position: relative;z-index: auto;">
    <img src="./img/001.jpg" alt="" style="position: absolute;z-index: 2">
  </div>
  <div style="position: relative;z-index: auto;">
    <img src="./img/002.jpg" alt="" style="position: absolute;z-index: 1;">
  </div> -->
  <!-- <div style="position: relative;z-index: 0;">
    <img src="./img/001.jpg" alt="" style="position: absolute;z-index: 2">
  </div>
  <div style="position: relative;z-index: 0;">
    <img src="./img/002.jpg" alt="" style="position: absolute;z-index: 1;">
  </div> -->

  <br>

</body>
</html>

元素分为普通元素和层叠上下文元素；

层叠上下文：层叠上下文元素才具有该属性；

层叠水平：在同一个层叠上下文中，元素在Z轴方向上显示的顺序；每个元素都有层叠水平；

Z轴：指用户眼睛与屏幕上这条看不见的垂直线；

1. 层叠上下文显示准则
1）. 谁大谁上：在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个；
2）. 后来居上：当元素的层叠水平一致，层叠顺序相同时，在DOM流中后面的元素会覆盖前面的元素；

2. z-index：auto和z-index: 0的区别：

z-index：auto不创建层叠上下文，是普通元素;
z-index：0 会创建层叠上下文，会导致层叠规则发生变化；

3. CSS3中对层叠上下文规则有影响的属性：

1）元素为flex布局元素（即父元素设置display: flex / inline-flex），且z-index的值不是auto

2) 元素的opacity不为1；

3）元素的tarnsform / transition 的值不为none;

4) 元素的 mix-blend-mode 的值不是 normal;