z-index

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

尝试一下

对于定位盒子（即 position 属性值非 static 的盒子），z-index 属性会指定：

  1. 盒子在当前层叠上下文中的层叠等级。
  2. 盒子是否会创建局部层叠上下文。

语法

css
/* 关键字值 */
z-index: auto;

/* 整数值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 使用负值降低优先级 */

/* 全局值 */
z-index: inherit;
z-index: initial;
z-index: unset;

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

取值

auto

盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。

<integer>

盒子在当前层叠上下文的层叠等级就是 <integer> 的值。盒子还会创建一个局部层叠上下文。这意味着该元素的后代元素不会和该元素的外部元素比较 z-index。

形式定义

初始值auto
适用元素positioned elements
是否是继承属性否
计算值as specified
动画类型an integer
Creates stacking context是

形式语法

z-index = 
  auto       |
  <integer>  |
  inherit

示例

视觉上的分层元素

HTML

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

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;
}

结果

规范

Specification
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
# z-index

浏览器兼容性

BCD tables only load in the browser

参阅