先说一下定位和布局的区别：
- 定位是针对某一元素来说的，是将这个元素定位到某个位置
- 布局是对整个页面来说的，比如两栏布局等
1. static 定位
position: static;- 默认的定位方式，块级元素独占一行，内嵌元素共享一行。
- 元素按照正常文档流进行布局，不受
top、bottom、left、right等属性的影响。
.static-element {
position: static;
}
2. relative 定位
position: relative;- 元素相对于其正常位置进行定位，不脱离标准流。
- 通过
top、bottom、left、right属性调整元素的位置，但不会影响其他元素的布局。
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
主要作用：
- 微调元素
- 做绝对定位的参考，子绝父相
3. absolute 定位
position: absolute;- 元素相对于其最近的已定位祖先元素（非 static）进行定位，使用绝对定位会脱离标准流，设置的 margin 也会失效。
- 如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。
- 绝对定位的盒子，其 display 会变成 block，原本不能设置宽高的元素可以设置宽高了。
.absolute-element {
position: absolute;
top: 0;
left: 0;
}
重点说一下 子绝父相 ：
这样可以使父级没有没有脱离标准流，子元素会以父元素作为参考点，方便对元素的掌控。而且是以父元素 border 内侧左上角作为自己的定位参考点。
4. fixed 定位
position: fixed;- 元素相对于视口进行定位，即使页面滚动，元素也会保持在视口的固定位置不变。
- 可以看做是特殊的绝对定位，也是会脱标的。
- 常用于PC端的header，或者移动端的 header 和 footer。
.fixed-element {
position: fixed;
top: 0;
left: 0;
}
5. sticky 定位
position: sticky;- 元素根据用户滚动的位置进行定位，当元素到达指定的位置时（通过滚轮滑动到满足条件时），元素将保持固定位置，直到用户滚动超出了指定位置。
- 需要指定一个值作为触发条件，一般是
top、bottom、left或right属性的值。 - 可以理解为是相对定位和固定定位的混合。跨越阈值前为相对定位，跨越阈值后为固定定位。
.sticky-element {
position: sticky;
top: 0;
}
注意：
- 父元素的overflow必须是visible,不能是hidden或者auto,因为父节点定位设置为overflow:hidden则父容器无法进行滚动。
- 父元素的高度不能低于 sticky 元素的高度。
- 如果父元素没有设置定位(position:relative | absolute | fixed)，则相对于 viewport （视口）进行定位，否则以定位的父元素为参考点。
- 设置阈值，必须指定上下左右四个阈值中的其中之一，粘性定位才可以生效。否则其行为与相对定位相同。并且 top 和 left 的优先级比另两个更高。
