解析CSS中元素的叠放顺序

来源：尚佳旅游分享网

文档的根元素

元素拥有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属性为正值的元素。

堆叠上下文可以嵌入其他堆叠上下文。

每个堆叠上下文和他的统计上下文是的。

堆叠上下文中子元素按照前述顺序摆放。

堆叠上下文内部的子堆叠上下文的z-index只在父堆叠上下文中有意义。

多么深奥鲜为人至的知识领域慢慢在实践中应用总结呗！

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程