用于浮动和定位的逻辑属性
2025-10-11 03:52:09
示例：定位布局的偏移属性
定位通常可以让我们相对于元素的包含块放置元素——我们就是参照元素在正常流里的位置给元素设置偏移。过去我们用实体属性 top、right、bottom 和 left 做这件事。
这些属性的取值是长度或百分比，而且参照的是用户屏幕的尺度。
逻辑属性规范创造了新的属性，你可以用来在你的书写模式里参照文本的流向定位。这些属性有：inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end。
在下面的例子里，带灰色点状边框的区域设置了 position: relative。为了在这个区域里用绝对定位放置蓝色盒子，我用了 inset-block-start 和 inset-inline-end 属性。把 writing-mode 属性改成 vertical-rl，或者加上 direction: rtl，看看相对于流的盒子是怎么根据文本方向保持位置的。
html
.container {
display: flex;
}
.inner {
width: 200px;
height: 200px;
position: relative;
border: 2px dotted grey;
}
.box {
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
padding: 10px;
width: 100px;
height: 100px;
}
css.inner {
writing-mode: horizontal-tb;
}
.physical {
position: absolute;
top: 20px;
right: 0;
}
.logical {
position: absolute;
inset-block-start: 20px;
inset-inline-end: 0;
}