CSS层叠规则解析

本文深入探讨了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;

 5) 元素的filter值不为 none;

 6)元素的 isolation 值是 isolate

 7) 元素的 -webkit-overflow-scrolling 设为touch;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen_文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值