内联盒设为relative定位时，其包含块级盒受何影响？相关疑问求解

1. 规范里的“relative定位”就是特指position: relative #

这句话里的relative positioning仅对应CSS属性position: relative，和position: absolute/fixed、display: inline-block完全是不同的布局规则：

• absolute/fixed属于脱离文档流的定位，元素的display会被隐式转为block（除非显式指定其他值）
• display: inline-block是修改元素的显示类型，让它同时具备行内元素和块级元素的特性

2. 你的示例表现差异的核心原因 #

默认情况下<span>是inline元素，CSS规范禁止inline元素包含block级元素（比如<div>），浏览器会自动执行“修复”逻辑：把<div>从<span>中剥离出来，生成匿名块盒，这就导致<span>的border只能包裹空内容，看起来像是破坏了line box。

• 给<span>加position: relative时，它的display类型还是inline，浏览器的“修复”逻辑依然生效，所以移除relative对效果没有影响
• 设position: absolute时，<span>的display会被隐式转为block，此时它可以合法包含block级元素，浏览器不会剥离<div>，border就能正常包裹内容
• 设display: inline-block时，<span>变成行内块元素，同样可以合法包含block级元素，表现和absolute一致

3. “any resulting translation”的含义及示例 #

这里的resulting translation指的是position: relative通过top/left/right/bottom属性产生的位置偏移。规范的意思是：当包含块级元素的inline盒被设置relative定位并偏移时，它内部的块级盒也会跟着一起偏移。

下面是符合规范场景的示例：

<p>
  <span class="relative-box">
    行内前置文本
    <div>内部块级元素</div>
    行内后置文本
  </span>
</p>

.relative-box {
  position: relative;
  top: 30px;
  left: 20px;
  background: #fff3cd;
  border: 1px solid #dc3545;
}
.relative-box div {
  background: #cce5ff;
  border: 1px solid #007bff;
}

这个示例里，浏览器会把<span>拆成“前置文本”“后置文本”两个inline部分，中间夹着<div>块级元素，但因为<span>设置了position: relative，所有这些部分（包括中间的<div>）都会一起向下偏移30px、向右偏移20px，这就是规范描述的效果。

内容的提问来源于stack exchange，提问作者OnlyWick