View in EnglishAlways switch to English

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 2015年7月.

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

尝试一下

z-index: auto;

z-index: 1;

z-index: 3;

z-index: 5;

z-index: 7;

<section>  <div>Change my z-index</div>  <div>z-index: 6</div>  <div>z-index: 4</div>  <div>z-index: 2</div>  <div>z-index: auto</div>  <div>z-index: auto</div>  <div>z-index: auto</div></section>

#example-element {  top: 15px;  left: 15px;  width: 180px;  height: 230px;  position: absolute;  /* center the text so it is visible even when z-index is set to auto */  line-height: 215px;  font-family: monospace;  background-color: #fcfbe5;  border: solid 5px #e3e0a1;  z-index: auto;  color: black;}.container {  display: inline-block;  width: 250px;  position: relative;}.block {  width: 150px;  height: 50px;  position: absolute;  font-family: monospace;  color: black;}.blue {  background-color: #e5e8fc;  border: solid 5px #112382;  /* move text to the bottom of the box */  line-height: 55px;}.red {  background-color: #fce5e7;  border: solid 5px #e3a1a7;}.position1 {  top: 0;  left: 0;  z-index: 6;}.position2 {  top: 30px;  left: 30px;  z-index: 4;}.position3 {  top: 60px;  left: 60px;  z-index: 2;}.position4 {  top: 150px;  left: 0;  z-index: auto;}.position5 {  top: 180px;  left: 30px;  z-index: auto;}.position6 {  top: 210px;  left: 60px;  z-index: auto;}

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

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

语法

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
动画类型	aninteger
Createsstacking context	是

形式语法

z-index =
auto|
<integer>|
inherit

<integer> =
<number-token>

示例

视觉上的分层元素

HTML

html

<div>  <div>Dashed box</div>  <div>Gold box</div>  <div>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;}