1. 定位简介

position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。

// 定位模式
static：静态定位（定位的默认值）
relative：相对定位
fixed：固定定位（脱离文档流）
absolute：绝对定位（脱离文档流）
sticky：粘性定位（脱离文档流）（2017年浏览器才支持）

// 边偏移属性
top：顶端偏移量，定义元素相对于其父元素上边线的距离
bottom：底端偏移量，
left：左端偏移量
right：右端偏移量
// 备注：边偏移需要和定位搭配使用，否则边偏移无效。和默认定位 static 搭配也是无效

2. 定位模式

定位口诀：子绝父相（父元素采用相对定位，子元素采用绝对定位）

2.1 static定位

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位

2.2 relative定位

1. 没有脱离文档流
2. 相对于元素自身的左上角为原点开始偏移
3. 可以通过边偏移移动位置，但是之前的位置仍然保留

2.3 absolute定位

1. 脱离文档流
2. 原点选择：
    - 父元素或者祖先元素中没有采用定位(相对定位 | 绝对定位 | 固定定位), 则以 body 浏览器为原点
    - 若父元素或者祖先中有定位(相对定位 |绝对定位 |固定定位), 孩子的绝对定位则根据最近的有定位的父亲为原点

2.4 fixed定位

1. 脱离文档流
2. 相对浏览器窗口的左上角为原点进行定位,因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置，不随网页滚动而变化

备注点：都是fixed定位时，滚动时后面的fixed会覆盖前面已经fixed的部分。

2.5 sticky定位

sticky定位必须结合边偏移属性使用，否则无效

// 示例1：
.test {
	position: sticky;
	top: 0px;
}

// 示例1表示: test元素开始是relative相对定位，等到test元素距离视口的顶部距离为0时，test元素就变成fixed固定定位。
这里的top相当于一个阈值，没达到阈值之前采用相对定位，满足阈值条件之后采用固定定位

sticky定位经常被用来做吸顶操作

请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

#toolbar {
  position: -webkit-sticky; /* safari 浏览器 */
  position: sticky; /* 其他浏览器 */
  top: 20px;
}

3. 定位应用

3.1 备注1

总结如下：只要是定位，会将内边距作为原点进行边偏移；如果是浮动会将内容区域作为原点进行展示

1. 定位元素如果没有使用偏移的话，那么定位元素默认展示的位置原点是从父元素的内容区域的左上角开始，不包含内边距。
2. 父元素如果有内边距、边框、外边距时，子元素偏移的相对标准是将父元素的内边距作为内容区域的原点开始偏移的。
3. 定位元素内部还可以再使用定位，并且偏移也都是基于父元素的内边距的左上角为原点开始偏移计算的

4. 定位元素内部可以使用浮动;并且是从父元素的内容区域作为原点展示
5. 浮动元素内部可以使用定位;并且是从父元素的内边距作为原点进行偏移


6. 子元素如果有内边距和边框和外边距时，子元素会将自己的外边距作为盒子整体，进行偏移

未完待续~