接上:
1.10 定位叠放次序z-index
在使用定位布局时,可能会出现盒子重叠的情况,此时,可以用z-index来控制盒子的前后次序(z轴)。
语法:
选择器{z-index:1;}
注:
数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上。
如果属性值相同,则按照书写顺序,后来居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。
1.11 定位的拓展
1)加了绝对定位的盒子不能通过
margin:0 auto水平居中,但可以通过下列计算方法实现水平和垂直居中
- left走50% 父容器宽度的一半
- margin负值 往左边走 自己宽度的一半一定要记住为负值。
2)定位的特殊特性
绝对定位和固定定位也和浮动类似。
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位,如果不给宽度和高度,默认大小是内容的大小。
3)脱标的盒子不会触发外边距塌陷
浮动元素,绝对定位(固定定位)元素的都不会触发外边距合并的问题。
4)绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)。
但是绝对定位(固定定位)会压住下面标准流的所有内容。
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的,文字会围绕浮动元素。