解析CSS 中元素的叠放顺序-tutorial css-php.cn

解析CSS 中元素的叠放顺序

零下一度

Lepaskan： 2017-05-10 11:56:40

asal

2853 orang telah melayarinya

当不包含z-index 属性和position属性时，所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。（使用负margin来重叠内联元素的特例除外。）
当元素浮动float时，浮动块元素被放置于非定位块元素与定位块元素之间，换句话讲，浮动元素显示在普通流中的后代块元素之上，常规流中的后代行内元素之下。
元素加入position位置属性时，所有具有position属性的元素及其子元素会显示在其他不具有position属性的元素上面。
z-index只在设置了position属性的元素上有效，没有position属性的元素上的z-index属性均不生效。

z-index属性产生堆叠上下文

拥有共同父元素的一组元素共同前移或者后移构成了一个堆叠上下文。每个堆叠上下文有一个单一的根元素，当元素上形成一个新的堆叠上下文时，堆叠上下文中的所有子元素按照堆叠顺序被局限在一个固定的区域内。一个堆叠上下文构成一个整体，其内部元素有相对不同的堆叠顺序，但与其他堆叠上下文比较时，只能整体上移或者下移。

通俗的讲，如果某个元素被置于其所在堆叠上下文的最底层，是没有办法让他显示在另一个拥有更高层的堆叠上下文元素之上的，哪怕将其z-index设置为无限大。

堆叠上下文的构成规则

文档的根元素
元素拥有position属性（除static属性之外），同时设置了为auto的z-index属性。
元素拥有opacity属性，且取值小于1。
一些新的css属性，如filter、css-regions等需要离屏渲染的属性，均能使元素形成堆叠上下文。
指定position:fixed的元素，技术z-index为auto

同一堆叠上下文内子元素的堆叠顺序

从底到上(root < -index < index-aotu < +index < position)：

堆叠上下文的根元素。
设置了position属性，并且z-index为负的元素及其子素，z-index值较大的元素置于较小元素之上，同等属性值的元素按照html中出现的先后顺序堆叠。
没有设置position的元素。
设置了position属性，并且z-index属性为auto的元素.
设置了position属性，并且z-index属性为正值的元素。