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
# z-index

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
z-index
auto
Negative values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参阅