css叠层样式 z-index 属性

由 hrs, 14 八月, 2023

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

  1. 盒子在当前堆叠上下文中的堆叠层级。
  2. 盒子是否创建一个本地堆叠上下文。

z-index 属性可以被设定为关键词 auto 或 <integer>。

取值
auto
盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。

<integer>
<integer>（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。

格式化语法

z-index = 
  auto       |
  <integer>  |
  inherit

标签

评论