堆叠顺序
堆叠顺序就是各种元素是在z轴上是如何排列的
1. 首先是background和border谁先谁后
k0sfOA.md.png
改变border的透明度可以看出border是在background上面的
2. 块级元素
k0yQpD.md.png
可以看出块级元素在border的上面
3. 内联元素
k0ygA0.md.png
可以看出内联元素在块级元素上面，如果son元素里面有文字，则会盖住前面先出现的文字
4. 定位元素
z-index只对定位元素起作用
k0cyF0.md.png
可以看到第二个元素的z-index是无效的，但是如果给第二个元素加上定位，那么z-index大的就会在上边
5. z-index为负
k02TxO.md.png
如果父元素（dad）没有定位，那么负z-index会出现在background的后面
k0RAds.md.png
堆叠上下文
- 根元素html
- 当父元素定位且z-index不为auto是会成为堆叠上下文，负z-index会出现在border的上面，块级元素的下面
k0Wk6O.md.png
- opacity值小于1的元素
k0Ww90.md.png
- position:fixed
堆叠上下文主要影响z-index元素
给a加上下文后a和a1好像一个整体盖住了b1
k0f3P1.md.png
如果再给b加上下文，a和b都是上下文但是b后出现所以b要高于a,所以虽然a1的z-index比b1的要高但是他的爸爸a比b1的爸爸b要低，所以b1在a1的上边。
如果a和b没有上下文，那么a1和b1就是z-index的比较。
k0fwad.md.png
网友评论