什么是堆叠上下文

MDN 解释：

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

形成堆叠上下文的条件：

  • 根元素 (HTML)。
  • z-index 值不为 auto 的 绝对/相对定位元素。
  • 固定（fixed） / 沾滞（sticky）定位（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）。
  • z-index值不为 auto 的 flex 子项 (flex item)，即：父元素 display: flex|inline-flex。
  • z-index值不为 auto 的grid子项，即：父元素display：grid。
  • opacity 属性值小于 1 的元素。
  • transform 属性值不为 none 的元素。
  • mix-blend-mode 属性值不为 normal 的元素。
  • transform属性值不为 none 的元素 。
  • filter值不为 none 的元素。
  • perspective值不为 none 的元素。
  • clip-path值不为 none 的元素。
  • mask / mask-image / mask-border不为 none 的元素。
  • isolation 属性被设置为 isolate 的元素。
  • 在 will-change 中指定了任意CSS属性。
  • -webkit-overflow-scrolling 属性被设置 touch 的元素。
  • contain属性值为 layout ， paint ，或者综合值比如 strict ， content 。

层叠准测

引用张鑫旭

  • 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
  • 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
  1. <style>
  2. div {
  3.   height: 100px;
  4. }
  6. .one {
  7.   background: gray;
  8.   position: relative;
  9.   z-index: 2;
  10. }
  12. .two {
  13.   background: yellow;
  14.   z-index: 1;
  15.   position: relative;
  16.   margin-top: -60px;
  17. }
  18. </style>
  20. <body>
  21.   <div class='one'>one</div>  
  22.   <div class='two'>two</div>
  23. </body>

谁大谁上

image.png

  1. <style>
  2. div {
  3.   height: 100px;
  4. }
  6. .one {
  7.   background: gray;
  8. }
  10. .two {
  11.   background: yellow;
  12.   margin-top: -60px;
  13. }
  14. </style>
  16. <body>
  17.   <div class='one'>one</div>  
  18.   <div class='two'>two</div>
  19. </body>

后来居上

image.png

堆叠顺序

堆叠顺序就是在同一个堆叠上下文中，当元素发生层叠时规定元素的垂直显示顺序。

堆叠上下文 - 图3

  1. <style>
  2. .main {
  3.   width: 200px;
  4.   height: 200px;
  5.   border: 10px solid rgba(255, 0, 0, 0.3);
  6.   background: yellow;
  7. }
  9. .block {
  10.   background: pink;
  11.   height: 25px;
  12.   color: red;
  13. }
  15. .float {
  16.   background: green;
  17.   height: 25px;
  18.   width: 100px;
  19.   margin-top: -15px;
  20.   color: blue;
  21.   float: left;
  22. }
  23. </style>
  25. <body>
  26. <div class='main'>
  27.   <div class='block'>块级元素</div>
  28.   <div class='float'>浮动元素</div>
  29. </div>

image.png

border 的层级是高于 background ，但都小于块级元素、浮动元素、行内元素。
浮动元素的层级是高于块级元素，但是行内元素比两者都高。

  1. <style>
  2. .main {
  3.   width: 200px;
  4.   height: 200px;
  5.   background: rgba(255, 0, 0, 0.5);
  6.   color: rgb(255, 255, 255);
  7. }
  9. .position {
  10.   background: green;
  11.   position: relative;
  12.   margin-top: -5px;
  13. }
  15. .position1 {
  16.   background: blue;
  17.   height: 70px;
  18.   position: relative;
  19.   z-index: -1;
  20. }
  21. </style>
  23. <body>
  24. <div class='main'>
  25.   行内元素
  26.   <div class='position'>定位元素</div>  
  27.   <div class='position1'>定位元素（z-index : -1）</div>
  28. </div>
  29. </body>

image.png

定位元素且 z-index:auto 的层级大于行内元素。
具有堆叠上下文的元素且 z-index 为负数，则层次小于背景之后。

  1. <style>
  2. .main {
  3.   width: 200px;
  4.   height: 200px;
  5.   background: pink;
  6. }
  8. .position {
  9.   background: green;
  10.   position: relative;
  11.   z-index:auto;
  12. }
  14. .position1 {
  15.   background: yellow;
  16.   height: 70px;
  17.   position: relative;
  18.   z-index: 1;
  19.   margin-top: -5px;
  20. }
  21. </style>
  23. <body>
  24. <div class='main'>
  25.   <div class='position'>定位元素</div>  
  26.   <div class='position1'>定位元素（z-index 正数）</div>
  27. </div>
  28. </body>

image.png

具有堆叠上下文的元素且 z-index 为正数的层级大于定位元素且 z-index:auto 。

参考：
[1] 深入理解CSS中的层叠上下文和层叠顺序
[2] css层叠顺序探究