堆叠上下文

默认堆叠顺序

demo地址

• background
• border
• 块级
• 浮动
• 内联
• z-index: 0
• z-index: +

如果是兄弟元素重叠，那么后面的盖在前面的身上

不含z-index的堆叠(Stacking without z-index)

• demo代码

• MDN详解

  当没有元素包含z-index属性时，元素按照如下顺序堆叠（从底到顶顺序）：

• 根元素的背景和边界

• 普通流(无定位)里的块元素(没有position或者position:static;) 按HTML中的出现顺序堆叠

• 定位元素按HTML中的出现顺序堆叠

float元素的层叠(Stacking and float)

• demo地址
• MDN详解

小提示：本案例MDN中的css设置了opacity: 0.7，透明度属性会生成堆叠上下文，造成误解，此处先不设置该属性

• 根元素的背景与边框
• 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
• 浮动块元素
• 常规流中的后代行内元素
• 后代中的定位元素按照它们在 HTML 中出现的顺序层叠

使用 z-index(Add z-index)

在第一个例子 Stacking without z-index 中， 我们描述了默认的摆放顺序。 当你需要指定不同的排列顺序时， 只要给元素指定一个z-index的数值就可以了

该属性必须是整数(正负均可)， 它体现了元素在z轴的位置。 如果你对z轴体系不了解， 你也可以把它理解成“层叠”， 每个层都有一个顺序数， 顺序数大的层在上面， 小的在下面

注意！z-index只对指定了 positioned(即position不为static的)属性的元素有效。

• 底层: 距离观察者最远
• ...
• -3 层
• -2 层
• -1 层
• 0 层 默认层
• 1 层
• 2 层
• 3 层
• ...
• 顶部: 最接近观察者

当没有指定z-index的时候， 所有元素都在会被渲染在默认层(0层)
当多个元素的z-index属性相同的时候(在同一个层里面)，那么将按照 Stacking without z-index 中描述的规则进行布局。
复制代码

• demo地址
• MDN详解

元素div#5 的z-index无效， 因为他没有被指定position属性。

注意! positioned元素，z-index值越大 越靠近用户，显示在上面

层叠上下文(The stacking context)

文档中的层叠上下文由满足以下任意一个条件的元素形成

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

符合上述任一条件，就会生成一个层叠上下文。

我个人将层叠上下文理解为类似于js中作用域的一种环境，

• 上下文可以包含于被包含，

• 上下文内部元素如何排序与外部无关

• 子元素的 z-index 值只在父级层叠上下文中有意义

• demo地址

• MDN详解

• Root(html标签)

  • Div#1 ------------------->z-index:5
  • Div#2 ------------------->z-index:2
  • Div#3 ------------------->z-index:4
    • Div#4 ------------------->z-index:6
    • Div#5 ------------------->z-index:1
    • Div#6 ------------------->z-index:3

注意 DIV#4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠完全在 DIV #3 中被处理。一旦 DIV #3 中的层叠和渲染处理完成，DIV #3 元素作为一个整体传递给 root 元素，并相对兄弟元素层叠

上面一段话可以概括成z-index不会垮层级去做比较

分辨出层叠的元素在 Z 轴上的渲染顺序的一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。

• Root
• DIV #2 - z-index 为 2
• DIV #3 - z-index 为 4
  • DIV #5 - z-index 为 1，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.1
  • DIV #6 - z-index 为 3，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.3
  • DIV #4 - z-index 为 6，在一个 z-index 为 4 的元素内层叠，所以渲染次序为 4.6
• DIV #1 - z-index 为 5