CSS定位 3

1.9 定位的总结

1. 一定记住相对定位、固定定位、绝对定位两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移

动位置。

2. 学习定位重点学会子绝父相。

1.10 定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z 轴 )

语法： 选择器 { z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto ，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有 z-index 属性

1.11 定位的拓展

1. 绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%; ：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px; ：让盒子向左移动自身宽度的一半。

2. 定位特殊特性

绝对定位和固定定位也和浮动类似。

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

3. 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位 ( 固定定位）元素的都不会触发外边距合并的问题