position: static
HTML 元素的默认值,即没有定位,遵循正常的文档流对象;静态定位的元素不会受到 top, bottom, left, right影响
position: relative
如果没有定位偏移量,那么对元素本身没有任何影响
不使元素脱离文档流
不会影响其他元素布局
left, right, top, bottom是相对于当前元素自身进行偏移的
position: absolute
使元素完全脱离文档流
使内联元素支持宽高(让内联元素具备块级元素的特性)
使块元素默认宽度由内容决定(让块元素具备内联元素的特性)
生成绝对定位的元素,相对于 static 定位以外(relative、absolute、fixed)的第一个父元素进行定位
position: fixed
使元素完全脱离文档流
使内联元素支持宽高(让内联元素具备块级元素的特性)
使块元素默认宽根据内容决定(让块元素具备内联元素的特性)
相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
position: sticky
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix