解析CSS中元素的叠放顺序

来源：动视网责编：小采时间：2020-11-27 18:51:44

解析CSS中元素的叠放顺序

解析CSS中元素的叠放顺序:当不包含z-index属性和position属性时，所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。（使用负margin来重叠内联元素的特例除外。）当元素浮动float时，浮动块元素被放置于非定位块元素与定位块元素之间，换句话讲，浮动元素显示在普通流中的后代

推荐度：

点击下载本文 文档为doc格式

导读解析CSS中元素的叠放顺序:当不包含z-index属性和position属性时，所有元素的叠放顺序与其所在HTML文档中出现的先后顺序一致。（使用负margin来重叠内联元素的特例除外。）当元素浮动float时，浮动块元素被放置于非定位块元素与定位块元素之间，换句话讲，浮动元素显示在普通流中的后代

堆叠上下文的构成规则

文档的根元素

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