Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

z-index

摘要

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

对于一个固定位置的元素,z-index 属性指定:

  1. 元素在当前堆叠上下文中的堆叠层级。
  2. 元素是否创建一个新的本地堆叠上下文。

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

语法

/* Keyword value */
z-index: auto;

/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 使用负值降低优先级 */

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

取值

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: 20em;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

结果

position:relative; z-index:1; position:absolute; z-index:2; left:60px; top:3em; position:absolute; z-index:3;
left:20em; top:-25px; opacity:0.9

规范

Specification Status Comment
CSS Transitions
visibility
Working Draft Defines visibility as animatable.
CSS Level 2 (Revision 1)
z-index
Recommendation Initial specification.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 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 3.0 (1.9) 4.0 4.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

参阅

文档标签和贡献者

标签: 
 此页面的贡献者: yuuko, Sebastianz, aki, FredWe, teoli, TimZhao
 最后编辑者: yuuko,