重新认识层叠上下文和层叠水平

前端

2023-11-28 23:18:36

层叠上下文

层叠上下文是页面上的一个区域，在这个区域内元素的层叠顺序由其 z-index 属性决定。层叠上下文可以由以下元素创建：

根元素（<html>）
具有 position 属性值为 absolute、relative 或 fixed 的元素
具有 opacity 属性值小于 1 的元素
具有 transform 属性的元素
具有 filter 属性的元素
具有 mix-blend-mode 属性的元素

在层叠上下文中，元素的 z-index 属性值越大，它的层叠顺序就越高。这意味着它将出现在其他元素之上。如果两个元素具有相同的 z-index 值，则它们的层叠顺序由它们的文档流顺序决定。

层叠水平

层叠水平是指元素在层叠上下文中的位置。层叠水平分为以下几种：

内联元素：内联元素在同一行上排列，不会换行。
块级元素：块级元素在单独的一行上显示，并占据整个可用宽度。
行内块元素：行内块元素既具有内联元素的特性，也具有块级元素的特性。它可以与其他元素在同一行上排列，但也可以占据整个可用宽度。

z-index 属性

z-index 属性用于控制元素的层叠顺序。z-index 属性值是一个整数，可以为正值或负值。z-index 属性值越大，元素的层叠顺序就越高。

需要注意的是，z-index 属性只在层叠上下文中有效。如果元素不在任何层叠上下文中，那么它的 z-index 属性值将不起作用。

实例

以下实例演示了如何使用 z-index 属性来控制元素的堆叠顺序：

<div style="position: relative; width: 200px; height: 200px;">
  <div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: red; z-index: 1;"></div>
  <div style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background-color: blue; z-index: 2;"></div>
</div>