div的层叠顺序css

最新推荐文章于 2022-09-08 01:14:00 发布

原创最新推荐文章于 2022-09-08 01:14:00 发布 · 818 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文深入探讨了CSS中元素的层级关系，包括块元素、行内元素、浮动元素和定位元素的相互影响。总结了层叠上下文的规则，如：浮动元素层级高于块元素，定位元素层级高于浮动元素，且后出现的元素通常层级更高。此外，还详细阐述了背景和边框的层级以及z-index的使用，为理解和解决页面元素覆盖问题提供了清晰的指导。

普通文档流中遵循：“后来者居上”。

当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素也盖不住前面的文字。
当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高。
行内元素和行内块元素的层级比块级元素高。

浮动系列：

浮动和浮动比，后一个比前一个层级高
浮动和块元素比，浮动层级高
浮动和行内块比，行内块层级高
浮动和行内比，行内层级高

定位的元素：

都为定位元素时，也遵循后一个元素比前一个元素高。
绝对定位和块元素比，绝对定位层级高
绝对定位和行内块元素比，绝对定位层级高
绝对定位和行内元素比，绝对定位层级高
绝对定位和浮动，绝对定位层级高。

总结：

层叠上下文（border/background）< 负z-index < block块状盒子 < 浮动的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并设定了正的z-index值，z-index值越大层级越高）
参考 https://www.cnblogs.com/chenshanyuanzi/p/7700823.html