13 定位

1.为什么需要定位

提问： 以下情况使用标准流或者浮动能实现吗？
1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

 2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。
所以：
1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2.定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移 。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

3. 定位模式

3.1 静态定位 static（了解）

静态定位是元素的默认定位方式，无定位的意思。
语法：
选择器 { position: static; }
? 静态定位按照标准流特性摆放位置，它没有边偏移
? 静态定位在布局时很少用到

3.2相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：
选择器 { position: relative; }

相对定位的特点：（务必记住）
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

3.3 绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

绝对定位的特点：（务必记住）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再占有原先的位置。（脱标）
所以绝对定位是脱离标准流的。
语法：
选择器 { position: absolute; }

13 定位

原文：https://www.cnblogs.com/GHNSL/p/13721799.html