css布局：定位形式

1.定位的引入

• 当一些效果用标准流或浮动无法快速实现时，就需要用定位来实现。
• 定位可以让盒子自由的在某个盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他盒子。
• 底层是标准流，中间层是浮动，顶层是定位。

2.定位的实现

定位 = 定位模式 + 边偏移

边偏移属性	作用
top	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	顶部偏移量，定义元素相对于其父元素左边线的距离
right	顶部偏移量，定义元素相对于其父元素右边线的距离

注意： 如果一个盒子既有left，又有right，会执行left属性，同理top和bottom会执行top

3.定位模式

定位模式	是否脱标	移动位置	使用频率
static静态定位	否	不能使用边偏移	很少
relative相对定位	否	相对于自身位置移动	常用
absolute绝对定位	是（不占位置）	带有定位的父极	常用
fixed固定定位	是 （不占位置）	浏览可视区	常用
sticky粘性定位	否	浏览可视区	很少（当前兼容性不好）

定位口诀：子绝父相
作用： 父级盒子使用相对定位，占据位置，不会被其他盒子挤下去；子级盒子使用绝对定位，在父级盒子中移动。

4.定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况，可用z-index来控制盒子的前后次序（z轴）
语法：选择器{ z-inde: 1;}
数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上。
如果数值相同，则后面的盒子在最上面。
数字后面不能加单位。
只有定位和盒子才有z-index属性。

5. 拓展技巧

5.1 fixed定位的小技巧-固定到版心右侧

1. 让固定定位的盒子left:50%，使其到达浏览器可视区（或者版心）的一半位置
2. 让固定定位和盒子margin-left: 版心宽度的一半距离，使其到达版心的右侧

效果：
粉色块为版心，蓝色块为固定定位的盒子

5.2 绝对定位盒子居中

开启绝对定位盒子没办法再用margin: 0 auto;的方式居中，故采用其他方法。
1. left: 50%; 让盒子到父容器的中间位置
2. margin-left: -自身盒子宽度的一半; 负值，让盒子向左走自身宽度的一半，达到居中效果
3. 垂直居中方法也一样，top: 50%; margin-top: -一半；

5.3 定位的特殊属性

• 行内元素添加绝对或固定定位，可以直接设置高度和宽度（如span）。
• 块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小（本来可能占满整个屏幕，加定位后就只有内容那么宽了）。
• 脱标的盒子不会触发外边距塌陷：浮动元素、绝对定位/固定定位元素都不会触发外边距合并的问题。

5.4 浮动元素不会压住标准流的文字，定位会

• 浮动最初产生的目的是做文字环绕效果，文字会围绕浮动的元素，所以浮动元素只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）。

• 绝对定位（固定定位）会压住下面标准流的所有内容。