一：定位介绍
简介：
- 定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
- 定位 = 定位模式 + 边偏移。
- 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。
二：定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：
值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
三：边偏移
边偏移就是定位的盒子移动到最终的位置，有top、bottom、left和right4个属性。
边偏移属性 | 示例 | 描述 |
top | top: 80px; | 顶端偏移量，定义元素相对于其元素上边线的距离。 |
bottom | bottom: 80px; | 底部偏移量，定义元素相对于其父元素下边线的距离。 |
left | left: 80px; | 左侧偏移量，定义元素相对于其父元素的左边线的距离。 |
right | right: 80px; | 右侧偏移量，定义元素相对于其父元素的右边线的距离。 |
四：四种定位详解
(1)静态定位：静态定位就是元素的默认定位方式，无定位的意思.
语法：
选择器 { position: static;}- 静态定位按照标准流特性摆放位置，它没有边偏移。
- 静态定位在我们布局时很少用到。
(2)相对定位：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
语法：
选择器 { position: relative; }- 相对定位的特点：（务必记住）
- 它是相对于自己原来的位置来移动的（移动位置的时候参照自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置） - 因此，相对定位并没有脱标，它是典型的应用是给绝对定位当爹的。
(3)绝对定位：绝对定位是元素在移动位置的时候，是相对于祖先元素来说的（拼爹型）。
语法：
选择器 { position: absolute; }绝对定位的特点：（务必记住）
- 如果没有祖先元素或者或者祖先元素定位，则以浏览器为精准定位（Document文档）。
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置。（脱标）
(4)固定定位：固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
语法：
选择器 { position: fixed ;}- 固定定位的特点;(务必记住)
- 以浏览器的可视窗口为参照点移动元素。
- 跟父级元素没有任何关系。
- 不随滚动条滚动。
- 2.固定位置不在占有原先的位置。
- 固定定位也是脱标的，其实固定定位也可以看作是一种决对定位。
- 固定定位小技巧;固定在版心右侧位置。
五：总结
- 我们在实际使用中常用的定位方式就这4种，除了这4种，还有其他的定位方式，例如：粘性定位等等。
- 4种定位中的相对定位和绝对定位使用的比较多，一般使用规则就是子类元素使用绝对定位，而父类元素使用相对定位，即子绝父相。
