z-index是如何工作的【译】

不管你信不信，但HTML元素的确是放在三维空间中的。除了平时我们知道的x轴和y轴，元素通过z轴控制他在第三个维度的显示。

像我们熟悉的margin, float是用来控制元素在x轴和y轴的位置的。而z-index就是用来控制元素z轴的显示的。

元素的z-index属性

z-index属性有下面两个作用：

这个属性只能应用在position属性为relative, absolute或者fixed的元素上。

他有下面三个取值：

值	描述
`auto`	元素在当前层叠上下文中的堆叠顺序是0，元素不会创建新的局部层叠上下文
`<integer>`	用整数值来定义堆叠顺序,创建一个新的堆叠上下文
`inherit`	设置和它父元素一样的堆叠上下文，并且不会创建新的层叠上下文

1	z-index: auto \| <integer> \| inherit

堆叠顺序就是当前元素在z轴上的值。较大的数值元素的堆叠顺序就高，离屏幕更近。

堆叠顺序

如果没有指定z-index的属性，元素的堆叠顺序是根据他在文档的位置决定的。元素声明堆叠顺序之后，比默认的堆叠顺序要高。

除了指定z-index之外，元素的堆叠顺序还由很多其他因素决定。元素的具体的堆叠顺序是由下面的规则决定的：

优先级	描述	CSS
1（最低）	元素自身的堆叠上下文	`z-index: <integer>`
2	堆叠顺序为负值的子元素	`z-index: < negative integer>` `position: relative absolute fixed`
3	在文档流中非行内且未定位的子元素	`display: /* not inline */` `position: static`
4	未定位的浮动子元素	`display: /* not inline */` `position: static`
5	在文档流中的未定位行内子元素	`display: /* inline */` `position: static`
6	堆叠级别为0的子元素	`z-index: auto 0` `position: relative absolute fixed`
7（最高）	堆叠级别为正数的子元素	`z-index: <positive integer>` `position: relative absolute fixed`

当我们使用z-index属性设置元素的堆叠顺序的时候，这个元素的堆叠顺序和页面上的其它元素的堆叠顺序并不会相互影响。元素的堆叠层级仅仅是相对于他的堆叠上下文

这就可能会导致一些很奇怪的现象，比如一个较高的z-index属性值元素并不一定是出现在一个较低的z-index属性值的元素上面。

具体堆叠上下文的规则可以通过下面几点来说明：

任何HTML文档的默认堆叠上下文都是<html>元素。除非创建了一个新的堆叠上下文，一个元素的堆叠顺序，在默认情况下，和页面上的其他元素都有关系。

我们可以设置z-index属性值为任意正整数来创建一个新的堆叠上下文。首先，设置当前元素的堆叠顺序为正数，然后就创建了一个新的堆叠上下文。

新的堆叠上下文会应用到他所有的子元素，堆叠顺序现在是在堆叠上下文中，而不是在根元素的上下文上。

在下面的示例当中,.foo位于第一个堆叠上下文环境中，.bar位于第二个堆叠上下文环境中

Demo1

当父元素设置了堆叠顺序，这意味着他所有的子元素不能可能高于或者低于这一水平。

在下面的示例当中,经管.bar的z-index比.baz高，但是它任然位于.baz的下面。这是因为，在第一个堆叠上下文中，.bar的堆叠层级不可能高于或者低于1。

1
2
3

.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }

Demo2

第一次翻译文章，好费劲呐，而且很多地方翻译得很生硬。请轻喷！！！！