CSS `position` 的定位详解

[vst-h]

1、position 可填写的值

• static，默认值，遵循正常的文档流。没有任何定位效果，偏移属性 (top/left/z-index) 无效
  

• relative，元素相对于它在正常流中的原始位置进行偏移。原始文档空间不变
  

• absolute，元素相对于其最近的已定位祖先容器进行定位。脱离文档流。
  

• fixed，元素相对于页面视口(viewport)进行定位。脱离文档流。不随页面滚动而改变。

• sticky，元素表现为 relative，直到滚动达到页面视口阈值后表现为 fixed。填写偏移属性才生效。

[vst-h]

2、position 属性的规则注意

absolute 定位

常常需要设置一个父容器为已定位容器，如果没找到就以页面视口(viewport)为定位容器

已定位容器：position 设置了 relative | absolute | fixed | sticky

fixed 定位

对于 iframe，viewport 就是 iframe 的尺寸，不会影响到外部页面的内容

sticky 定位

• top | bottom 影响的是 Y 轴滚动条的滚动阈值，
  • 元素原始位置在视口偏移之上，使用 top 偏移
  • 元素原始位置在视口偏移之下，使用 bottom 偏移
• left | right 影响的是 X 轴滚动条的滚动阈值
• 四个值都是可以独立生效的，不会冲突。一进入页面，达到阈值就会偏移

[vst-h]

3、偏移属性注意

• top | right | bottom | left 设置平面位置
• z-index 设置 Z 轴位置
• 有简写 inset: <top> <right> <bottom> <left>
• 书写方向的偏移

物理属性	逻辑属性 (对应)	书写方向 (LTR)	书写方向 (RTL)
top	inset-block-start	顶边	顶边
bottom	inset-block-end	底边	底边
left	inset-inline-start	左边	右边 (文本开始方向)
right	inset-inline-end	右边	左边 (文本结束方向)

• 同时书写的优先级，默认 top > bottom， left > right
• 如果同时写 top | bottom 或 left | right，且元素没有设置宽高时
  • 元素容器将会弹性适应偏移属性，使得 top 和 bottom 的偏移距离正确
  • 仅对块级元素有效
  • 如果设置了元素的宽高值，那么元素的大小以设置值为准，top 的优先级高于 bottom，bottom 无效