CSS position 定位
CSS 中 static、relative、absolute、fixed、sticky 五种定位方式的职责差异。
#css
#frontend
#concept
#growing
[!info] related notes
- 所属 MOC: CSS 盒模型与布局 MOC
- 相关概念: box-model, flex, grid
CSS position 定位
position 决定的是元素如何脱离或参与正常文档流，以及偏移参照系是什么。
一句话定义
理解 position 的关键，不是背五个值，而是弄清它会不会脱离文档流、相对谁定位、滚动时会不会跟着变。
五种常见取值
static
- 默认值
- 元素按正常文档流排布
top/right/bottom/left通常不生效
relative
- 元素仍在文档流中
- 相对自己原来的位置偏移
- 常用于给内部绝对定位元素提供参照系
absolute
- 脱离文档流
- 相对最近建立绝对定位包含块的祖先定位；非
static定位是常见条件，transform等也可能建立包含块，没有时使用初始包含块 - 常用于弹层角标、局部覆盖元素
fixed
- 脱离文档流
- 通常相对视口定位
- 页面滚动时位置通常不变；若祖先因
transform等建立固定定位包含块，则不再以视口为参照
sticky
- 在阈值前像
relative - 达到阈值后像吸附在滚动容器里
- 常用于吸顶标题、分组索引
- 在目标轴上需要至少一个非
auto的 inset（如top: 0），并受最近滚动容器与自身包含块约束；祖先 overflow 和可滚动空间会影响表现
最容易混淆的点
absolute不一定相对父元素；应检查哪个祖先实际建立了包含块relative不会让元素脱离文档流sticky不是简化版fixed，它依赖滚动容器和阈值条件
最短记忆方式
relative 留位偏移，absolute/fixed 脱流定位，sticky 滚动吸附。
面试要点
本页此前混入的两个独立主题已迁出，旧入口保留在此：
Digital Biome