CSS position定位

MDN position

position 定位

• 默认static （top，bottom等无效）
• 绝对定位 absolute fixed
• 相对定位 relative （偏移量）
• 粘性定位 sticky 兼容性差（当页面发生滚动时，不会脱离视窗，直到容器离开视窗）
  根据滚动位置在相对（relative）和固定（fixed）之间切换
  通常应用于顶部导航栏底部栏

定位会涉及到z-index 分层的问题 数字越大越上层

绝对定位元素的宽高在未指定时，根据left、right、top、bottom确定宽高
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。（BFC）

relative

元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置
（因此会在此元素未添加定位时所在位置留下空白）

absolute

元素会被移出正常文档流，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。

fixed

元素会被移出正常文档流，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
打印时，元素会出现在的每页的固定位置。
fixed 属性会创建新的层叠上下文。
当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

sticky

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），包括 table-related 元素，基于 top、right、bottom 和 left 的值进行偏移。
偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文）。

一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。

相对于可滚动区域进行定位，在滚动导致对象要移出标定位置时，会出现粘着。