div的分层&层叠上下文

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

div的分层-1

div的分层-2

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

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

层叠式上下文

如何创建层叠上下文？

具体看层叠上下文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负数无论再小也不会逃出创建的层叠上下文空间中。