css系列2 堆叠上下文

堆叠顺序

堆叠顺序-八层

内联元素比如span，width，height，padding-top，padding-bottom，margin-top，margin-bottom属性不起作用，margin-left/right, padding-left/right起作用

background与border

background的影响范围为: 一般元素的background-color覆盖该元素的content, padding,和border。而margin不会显示该背景颜色。
上图所示其实是因为border层在bg层的上面，有一个层叠关系在导致的。注意这里只会上次覆盖下层，不会两种颜色融合在一起变成另外颜色。
综上: border要高于bg

---

ok，现在div中添加一下文字，然后text-indent让文字跟border重叠
text-indent:50px; 向后缩进50px；比如说首行空两格。

image.png
综上: 内联元素(文字,img,kbd等)要高于border

---

image.png

有内联元素，也有块级元素，内联元素在块级元素上面
div span都有文字的话，则谁后出现谁在上面。
浮动元素里面的文字在外部元素文字下面。
浮动元素在块级元素上，内联元素下。

z-index只对定位元素有效, position的属性值如下：absolute-绝对定位、relative-相对定位、fixed-固定定位、inherit-继承父元素定位，static-静态定位。static这个静态定位，其实这是默认值，表示当前元素不进行定位，所以如果元素设置了这个属性值，其实是和没有设置是一样的，会使元素忽略掉z-index属性，使其不起作用。

堆叠上下文

a b两个堆叠上下文，a, b顺序
a -> z-index = 2
b -> z-index = 0
b中的0比a中的2还要高

MDN 堆叠上下文