z-index

z-index?属性指定了一个具有定位属性的元素及其子代元素的 z-order。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。

/* 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: unset;

对于一个已经定位的元素（即position属性值是非static的元素），z-index?属性指定：

1. 元素在当前堆叠上下文中的堆叠层级。

2. 元素是否创建一个新的本地堆叠上下文。

上面的例子显示的效果z-index。在左边我们画了三个盒子，并用绝对定位使它们重叠。默认情况下，这些元素按照它们在HTML中声明的顺序进行堆叠。在右边，我们有相同的标记，但已经扭转了使用默认z-index的顺序。

初始值	auto
适用元素	positioned elements
是否是继承属性	no
适用媒体	visual
计算值	as specified
Animation type	an integer
正规顺序	the unique non-ambiguous order defined by the formal grammar
Creates stacking context	yes

语法

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

值

auto元素不会建立一个新的本地堆叠上下文。当前堆叠上下文中新生成的元素和父元素堆叠层级相同。<integer>整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素同时会创建一个堆叠层级为0的本地堆叠上下文。这意味着子元素的 z-indexes 不与元素外的其余元素的 z-indexes 进行对比。

正式语法

auto | <integer>

示例

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

CSS

.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	Status	Comment
CSS TransitionsThe definition of 'animation behavior for z-index' in that specification.	Working Draft	Defines z-index as animatable.
CSS Level 2 (Revision 1)The definition of 'z-index' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	4.0	1.0
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec)	1.0	(Yes)	3.0 (1.9)	4.0	4.0	1.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?
Negative values (CSS2.1 behavior, not allowed in the obsolete CSS2 spec)	?	(Yes)	?	?	?	?

另见

CSSposition属性

理解css z-索引

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18