← CSS 逻辑属性 · Logical Properties / 定位:inset-block / inset-inline 与 inset 待审核 3 / 5
inset · 定位

定位:inset-block / inset-inline 与 inset

定位元素(position 不为 static)的偏移也有逻辑版:inset-block-start / inset-block-end / inset-inline-start / inset-inline-end,以及简写 inset-block / inset-inline。另有把四边一次写完的 inset(语法同 margin,1–4 个值),但它是 top / right / bottom / left 的物理简写,取值按物理四边解析,不随书写模式变化。下面只给盒子设 inset-block-startinset-inline-start(另两边留 auto),它就锚在「block × inline 的起始角」;翻转书写方向,看这个角在物理四角之间迁移。

1 · 起始角锚定

定位到内容起始角。 弹层、徽标、关闭按钮通常应贴在内容的起始角,而非固定的左上角。inset-block-startinset-inline-start 的组合在 horizontal-tb 下:ltr 为左上,rtl 自动变右上,镜像布局无需另写一套偏移。

2 · inline 轴的过约束[over-constrained]

盒子的两端 inset 与 inline-size 同时非 auto 时,inline 轴的定位方程无解,此时 end 一侧的 inset 被丢弃;而两条 margin 为 auto 时,富余空间先由 margin 吸收,方程仍有解。

图 2-1 · 一个绝对定位盒在 inline 轴上的四种取值组合。切换 inline-size120px / auto)与 margin-inline0 / auto),观察两条 inset 是否都生效。读数为包含块 padding edge 到盒子 border box 的距离,即该侧 inset 与 margin 之和。

过约束[over-constrained]规则不变。 过约束按轴判定:某条轴的两端 inset 与该轴尺寸同时非 auto 时,该轴的定位方程无解(如 inset-inline-startinset-inline-endinline-size 三者齐全),即为过约束。此时按 CSS 定位规则,start 一侧的 inset 生效、end 一侧被忽略——与物理定位中「ltrleft、忽略 right」是同一条规则,只是参照系换成了逻辑轴。

前提是该轴的两条 margin 非 auto。margin 为 auto 时富余空间先由 margin 吸收,方程有解,不进入 over-constrained 分支——inset: 0 + margin: auto 的居中即由此而来。