CSS 的几种 position 定位

1、static：静态定位，所有标准文档流中的元素默认值。

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

2、relative：相对定位，上浮但不脱离标准文档流。

该关键字指定元素会相对于自身标准文档流中的位置进行相应的偏移，可以给元素设置 top、right、bottom、left 值；

主要用途：微调元素、作为绝对定位的参考（子绝父相）。

3、absolute：绝对定位，脱离标准文档流。

该关键字指定元素的特点：（1）没有父元素时，相对于浏览器定位（2）有父元素且父元素是 static 定位时，相对于浏览器定位（3）有父元素且父元素是非 static 定位时，相对于该父元素定位（多层父元素，相对于最近的非 static 父元素定位）（4）绝对定位后的元素在页面上脱离标准文档流，不占据位置。

主要用途：对话框的关闭按钮、鼠标悬浮按钮提示（绝对定位的信息文字会换行：white-space:nowrap；）。

总结：设置 absolute 绝对定位的元素的定位基准是基于祖先里的非 static 的的元素。

经验总结：如果写了absolute，一般都得补一个 relative。如果写了 absolute 或 fixed，一定要补 top 和 left 属性。

4、fixed：固定定位，脱离标准文档流，相对于浏览器定位。

该关键字指定元素定位的参照物总是当前的文档。利用 fixed 定位，很容易让一个 div 定位在浏览器文档的某个位置。

主要用途：页面中固定位置的小广告，回到顶部的按钮。忠告：手机端最好不要用这个属性，bug太多了 。

5、sticky：粘性定位，是 relative 和 fixed 两种定位集于一体的特殊定位。（有兼容性问题）

特点：（1）元素在跨越特定阈值之前为相对定位，之后为固定定位。特定阈值是指 top、right、bottom、left 其中一个属性，只有设置特定阈值，才能使该定位生效，否则跟 relative 相对定位相同。（top 优先级比 bottom 高，left 优先级比 right 高）（2）设定 sticky 定位元素的任意父节点的 overflow 属性必须是 visible（overflow 默认值），否则 sticky 定位不生效。（3）父元素是非 static 定位，则相对于该父元素定位，否则相对于浏览器窗口定位。

主要用途：滑动超过阈值时，隐藏标题栏，小于阈值时，显示标题栏。特别适合导航条上面还有其他内容的页面使用。