堆叠顺序
堆叠顺序-八层内联元素比如span,width,height,padding-top,padding-bottom,margin-top,margin-bottom属性不起作用,margin-left/right, padding-left/right起作用
background与borderbackground的影响范围为: 一般元素的background-color覆盖该元素的content, padding,和border。而margin不会显示该背景颜色。
上图所示其实是因为border层在bg层的上面,有一个层叠关系在导致的。注意这里只会上次覆盖下层,不会两种颜色融合在一起变成另外颜色。
综上: border要高于bg
ok,现在div中添加一下文字,然后text-indent让文字跟border重叠
text-indent:50px; 向后缩进50px;比如说首行空两格。
综上: 内联元素(文字,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还要高
网友评论