堆叠顺序
堆叠顺序就是各种元素是在z轴上是如何排列的
1. 首先是background和border谁先谁后

改变border的透明度可以看出border是在background上面的
2. 块级元素

可以看出块级元素在border的上面
3. 内联元素

可以看出内联元素在块级元素上面,如果son元素里面有文字,则会盖住前面先出现的文字
4. 定位元素
z-index只对定位元素起作用

可以看到第二个元素的z-index是无效的,但是如果给第二个元素加上定位,那么z-index大的就会在上边
5. z-index为负

如果父元素(dad)没有定位,那么负z-index会出现在background的后面

堆叠上下文
- 根元素html
- 当父元素定位且z-index不为auto是会成为堆叠上下文,负z-index会出现在border的上面,块级元素的下面
k0Wk6O.md.png
- opacity值小于1的元素
k0Ww90.md.png
- position:fixed
堆叠上下文主要影响z-index元素
给a加上下文后a和a1好像一个整体盖住了b1

如果再给b加上下文,a和b都是上下文但是b后出现所以b要高于a,所以虽然a1的z-index比b1的要高但是他的爸爸a比b1的爸爸b要低,所以b1在a1的上边。
如果a和b没有上下文,那么a1和b1就是z-index的比较。

网友评论