z-index

基线 广泛可用

此功能已经很成熟，并且可以在许多设备和浏览器版本上运行。它自 2015 年 7 月.

报告反馈

试试看

z-index CSS 属性设置 定位 元素及其子元素或 flex 和网格项目的 z 顺序。具有较大 z-index 的重叠元素会覆盖具有较小 z-index 的元素。

  1. 对于定位的盒子（即任何 position 都不为 static 的盒子），z-index 属性指定
  2. 盒子在当前 堆叠上下文 中的堆叠级别。

语法

盒子是否建立局部堆叠上下文。
/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Negative values to lower the priority */

/* Global values */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

css

z-index 属性指定为关键字 auto 或 <integer>。

值

auto

<integer>

盒子不建立新的局部堆叠上下文。生成盒子的堆叠级别在当前堆叠上下文中为 0。

正式定义

此 <integer> 是生成盒子在当前堆叠上下文中堆叠级别。盒子也建立局部堆叠上下文。这意味着后代的 z-index 不与该元素外部元素的 z-index 进行比较。值
初始值应用于
定位的元素继承
否计算值
如指定动画类型
一个 <integer>创建 堆叠上下文

正式语法

z-index = 
  auto       |
  <integer>  |
  inherit

示例

是

HTML

视觉上分层元素
<div class="wrapper">
  <div class="dashed-box">Dashed box</div>
  <div class="gold-box">Gold box</div>
  <div class="green-box">Green box</div>
</div>

CSS

盒子是否建立局部堆叠上下文。
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

html

规范

结果
层叠样式表级别 2 修订版 2 (CSS 2.2) 规范
# z-index

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅