← CSS 逻辑属性 · 把上下左右换成 block / inline / 定位:inset 取代 top / right / bottom / left 待审核 3 / 5
inset · 定位

定位:inset 取代 top / right / bottom / left

绝对定位元素的偏移也有逻辑版:inset-block-start / inset-block-end / inset-inline-start / inset-inline-end,以及简写 inset-block / inset-inline,和把四边一次写完的 inset(语法同 margin,1~4 个值)。下面只给盒子设 inset-block-startinset-inline-start(另两边留 auto),它就锚在「block × inline 的起始角」;翻转书写方向,看这个角在物理四角之间迁移。

1 · 锚定起始角

用途: 把弹层、徽标、关闭按钮钉到「内容起始角」而非「左上角」。inset-block-start + inset-inline-start 在 LTR 是左上、在 RTL 自动变右上,无需为镜像布局另写一套坐标。

过约束规则不变。 若四条 inset 全设了值、盒子又有固定 inline-size / block-size,就会过约束;此时按 CSS 定位规则,start 一侧的 inset 生效、end 一侧被忽略(与物理定位里「LTR 取 left、忽略 right」同理,只是参照系换成了逻辑轴)。