div的分层&层叠上下文

一个div的分层：由下到上分别是，background，border，块级子元素，浮动子元素，内联子元素

div的分层-1

div的分层-2

根据这个原理，其实浮动就是将其分层上提一层。

层叠式上下文：当元素使用了某些样式属性后，就会出现元素与元素之间发生重叠的现象，这时候在平面空间的基础上，元素又有了一层垂直空间的关系，这就是层叠上下文。但是，层叠上下文的最底层永远是<html>元素（根元素<html>本身就能创建层叠上下文）。

层叠式上下文

如何创建层叠上下文？

具体看层叠上下文MDN

比较重要的几个：z-index/flex/opacity/transform/fixed

z-index与层叠上下文

1. z-index能决定在同一个层叠上下文空间中，元素的顺序，值越大，则位置越高。

2. z-index的取值默认为auto，可以取任意正负整数，0。注意：auto计算的值是0，但是auto和直接z-index=0完全不一样，最简单的z-index:auto不会创建层叠上下文，而z-index=0会。

3. z-index的比较要分清楚两个元素是否在同一个层叠上下文空间中。只有在同一个层叠上下文空间中的元素，才能用z-index（正整数，负数会出现奇怪的效果）比较。如果一个元素的层叠上下文空间比另一个元素的层叠上下文空间要高级，在z-index为正整数的情况下，空间更高级元素的z-index更小也会出现在更上方。z-index=5浮在z-index=10上方

4. z-index负数无论再小也不会逃出<html>创建的层叠上下文空间中。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容