本文是我学习层叠上下文的总结。主要从以下途径学习:
MDN: https://developer.mozilla.org...
张鑫旭大大的博文:http://www.zhangxinxu.com/wor...

层叠顺序

层叠顺序遵循下图的规则,其中在张鑫旭大大的博文中提到inline-block的层叠顺序与图中inline box是一个level的;z-index:auto实际上和z-index:0单纯从层叠水平上看,可以认为是同一level(两者在层叠上下文领域有着根本性的差异)。(如要看完整图片请移步到张鑫旭大大博文

层叠准则

  1. 根据上图,层叠水平越大,就显示在越上面。

  2. 当层叠水平一样时,在DOM中位置越后,就显示在越上面。

层叠上下文的特性

  • 层叠上下文的层叠水平比普通元素高;

  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素都受限于外部的层叠上下文;

  • 层叠上下文和兄弟元素独立,只需要考虑后代元素;

  • 每个层叠上下文是自包含的:当元素的内容发生层叠后,整个该元素将会 在父层叠上下文中 按顺序进行层叠。

层叠上下文创建的条件

  1. html元素

  2. z-index的值不为auto的相对/绝对定位元素

  3. position: fixed的元素

  4. 应用了某些CSS3的元素

    • z-index的值不为auto的flex项(即父元素display: flex | inline-flex)

    • opacity小于1的元素

    • transform值不为none元素

    • min-blend-mode值不为none的元素

    • filter值不为none的元素

    • perspective值不为none的元素

    • isloation值为isolate的元素

    • will-change指定了任意属性

    • -webkit-overflow-scrolling值为touch的元素

demo

先放MDN的例子的效果图(点击查看代码与效果

下面是我自己写的一些demo,主要与z-index属性相关。

demo通用HTML代码


    <div class="outter">outter
      <div class="inner">inner</div>
    </div>

基础CSS(没有创建层叠上下文)。所有demo都是在这份CSS的基础上写出来的。


    .outter {
        width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的position值为relative或absolute,并且不设置z-index值或者z-index值为auto时,outter没有创建层叠上下文。此时根据层叠顺序表,负的z-index元素在block元素下面,所以,inner被outter覆盖了。
查看demo

相对/绝对定位


    .outter {
      position: relative;z-index: auto;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

虽然outter的position值设置为absolute或者relative,但z-index值设置为auto,此时,outter并没有创建层叠上下文,所以,效果与基础demo一致。
查看demo


    .outter {
      position: relative;z-index: 0;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的z-index值设置为数值,甚至为0时,outter会创建层叠上下文,此时inner会覆盖outter。
查看demo

position: fixed的元素

    .outter {
      position: fixed;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的position值设置为fixed时,outter会创建层叠上下文,此时inner会覆盖outter。
查看demo

opacity小于1的元素

    .outter {
      opacity: .5;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的opacity值设置小于1时,outter会创建层叠上下文,此时inner会覆盖outter。
查看demo

transform值不为none元素

    .outter {
      transform: rotate(15deg);
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的opacity值设置不为none时,outter会创建层叠上下文,此时inner会覆盖outter。
查看demo

will-change指定了任意属性

   .outter {
      will-change: transform; 
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

当outter的will-change值设置为任何值时,outter会创建层叠上下文,此时inner会覆盖outter。
查看demo

z-index的值不为auto的flex项(即父元素display: flex | inline-flex)

此处的HTML结构有点不同。

<div class="box">
  <div class="outter">outter
    <div class="inner">inner</div>
  </div>
</div>

    .box {
      display: flex;
    }
    .outter {
      z-index: 1;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

在原来的HTML外层加一个class为box的div,并设置display值为flex或者inline-flex,此时outter为flex项,会创建层叠上下文,此时inner会覆盖outter。
查看demo

其他
由于暂时对mix-blend-mode、filter、isolation、-webkit-overflow-scrolling属性了解不多,所以没有做demo。如果想看demo效果,可以看张鑫旭大大的博文

结语

学习了层叠上下文之后,对于元素覆盖这个问题有了比较清晰的认识,有时候可以不依赖z-index来解决问题了。

你可能感兴趣的文章

载入中...
chenBright chenBright

226 声望

发布于专栏

chenBright

学习笔记、思考、感悟

2 人关注