定位的拓展

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

语法:

选择器 { z-index: 1; }

定位的叠放次序中有什么需要注意的?

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

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

数字后面不能加单位

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

定位的拓展

1.如何让绝对定位的盒子居中?

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

实现水平居中

1) 先让绝对定位的盒子 left: 50%;

2) 再偏移定位盒子的一般距离 (margin-left: 负的定位盒子宽度的一半)

定位有什么特殊的特性?

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

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

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

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

        浮动元素, 绝对定位(固定定位) 元素的都不会出发外边距合并的问题

4.浮动元素不会压住标准流的文字 (绝对定位也就是固定定位会完全压住盒子)

浮动元素不同, 只会压住它下面标准流的盒子, 但是不会压住下面标准流盒子里面的文字 

但是 绝对定位(固定定位) 会压住下面标准流所有的内容

浮动为什么不会压住文字?

浮动之所以不会压住文字, 因为浮动产生的目的最初是为了做文字环绕效果, 文字会围绕浮动元素

加了绝对定位的盒子可以直接设置高度和宽度