如果行内框是相对定位，那么它的块级框受什么影响?

Question

source spec: Anonymous block boxes.

我对这句话很困惑。

当这样的行内框受到相对定位的影响时，任何产生的翻译也会影响行内框中包含的块级框。

我不知道"相对定位"是否是一般意义，我的意思是可以是absolute或fixed，以及display的其他性质，例如inline-block。

让我们看一些例子。

我知道DIV打破了line box，但position: relative似乎无用，我可以直接删除它。

.father {
position: relative;
border: 1px solid red;
}

<span class="father">
<div>Hi Wick</div>
</span>

但是，如果我将relative修改为absolute，我知道line box没有"坏"，所以border正常工作。如果我添加display的inline-block属性，结果是一样的。

.father {
position: absolute;
border: 1px solid red;
}

<span class="father">
<div>Hi Wick</div>
</span>

另外，any resulting translation是什么意思?我知道有些行为可能会改变containing block，所以他们会受到后代的影响。我不确定是不是关于containing block。

因此，我需要一些例子!

Answer 1

<span>元素是内联的，这意味着它没有"box"在它周围应用边框。它被视为一行没有容器的文本。把它想象成一条水平线，其中每个字母的中心都在这条线上。将position: absolute;应用于<span>会导致它被当作display: block;一样对待，这就是为什么border属性会对它起作用。

在第一个示例中，内部div是内联元素中的块级元素。如果你给div应用边框，你会看到它在容器的宽度上伸展，以水平填充空间。由于父span是内联的，因此边框不会像您希望的那样显示，但子div的高度至少给出了某种程度的"尺寸"。

还有"任何结果翻译"。只是指在屏幕上移动元素的CSS属性，如left、right、top、bottom或transform: translate();。