CSS之定位

背景

当标准流或者浮动不能实现时。（即让一个元素浮动在另一个元素上方，或者一个模块固定在屏幕的某个位置）

1. 浮动可以让多个块级盒子没有缝隙排列显示，用于横向排列盒子
2. 而定位可以让盒子自由自在某个盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他盒子

组成

定位模式

用于指定一个元素在文档的定位方式，使用position设置，共有四个

边偏移

静态定位（static）

默认方式，就是无定位的意思，按照标准流的方式来摆放，所以在布局时很少使用

相对定位（relative）

元素在移动位置的时候，是根据原来的位置来定位的。常和绝对定位配合使用。

原来的位置继续占有，后面的元素还是按照标准流的方式排列

绝对定位（absolute）

绝对定位在移动位置的时候，是相对于他的祖先元素来说的（会找到第一个祖先元素）
特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位。
2. 若多个祖先元素有定位（相对，绝对或固定定位），则找到最近的祖先元素为参考点。
3. 绝对定位不在占有原有的位置。（脱离标准流）

口诀：子绝父相最常见就是父元素添加相对定位，子元素使用绝对定位

固定定位 (fixed)

固定定位即固定于浏览器可视区域的位置。使用场景：可以在浏览器页面滚动时，元素位置不改变。

特定

1. 基于浏览器的可视窗口作为参照点移动元素。即位置和父元素无关，且不随滚动条滚动而滚动
2. 固定定位不占有原来的位置**（脱标）**

技巧：固定在版心右侧
即

/*固定到中央，即版心的垂直分割线*/
left:50%;
/*再距离中央一个版心的一般宽度*/
margin-left: w / 2;

粘性定位（sticky）

即相对定位和固定定位的混合，拖动到一定的位置时，固定在相对于可视窗口的某个位置。

1. 以浏览器的可视窗口为参照点
2. 占有原先的位置
3. left，top，bottm，right必须设置至少一个才有用

定位的叠放次序

可以设置z-index来控制盒子的前后次序。z-index正方向由屏幕内指向屏幕外，z-index越大则摆放在更上面

1. z-index可以是负数正数或0
2. 属性值相同，按照书写顺序后来者居上
3. 数字后面不能单位，必须写成z-index:1这种格数
4. 只有定位的盒子才有z-index这个属性

拓展

绝对定位的盒子不能通过 margin: 0 auto;水平居中显示
可以通过以下代码实现水平居中和垂直居中

left:50%;
bottom:50%;
/*w为当前元素的宽度*/
margin-left: -w/2;
/*h为当前元素的高度*/
margin-bottom: -h/2;

特殊特性

1. 行内元素添加了绝对或相对的定位，就可以不用转化为块级元素直接设置宽度和高度
2. 如果不加，则宽度高度默认是内容的大小。
3. 脱标的盒子是不会出发外边距合并
4. 浮动元素只会压住他下面标准流的盒子，不会压住标准流盒子中的文字。讲解。而绝对定位或固定定位会压住下面标准流的所有内容。浮动之所以不会压住文字，是因为浮动的最初目的是为了产生文字环绕效果。