这个更改栏是如何使用绝对和相对位置制作的？

Question

p{
position:relative;
margin-right:10px;
left:10px;
}

span{
position:absolute;
top:auto;
left:-1em;
color:red;
}

<p>
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing at the very least THIS
<span>--</span>word.</p>

我找到了here。这是层表示部分之前的示例。

玩了一会儿，我什至不知道这个更改栏是做什么的。它是“THIS”和“word”之间的跨度。有一件事很清楚：它总是与“单词”一词在同一行。不一定在最后一行。

我有 3 个关于如何制作此更改栏的问题：

1. 在 p 标签的 CSS 中。代码的作者说他使用margin-left：10px“预期”偏移（相对位置left：10px）。为什么在期待中？两者不冲突吗？

2. 我不清楚 span 的包含框在哪里，以及 POSITION:absolute 和 LEFT:-1em 如何。 POSITION:absolute 将 SPAN 脱离正常流程并放入其包含框的左上角，但我不知道该包含框在哪里。以及 LEFT:-1em 如何使更改栏看起来像浮动到左侧。假设浏览器默认字体是 16px，那么 1em 将是 16px，这意味着 LEFT:-1em 将更改栏向左移动 16px。

没有左：-1em。看起来该栏卡在最后一行第一个单词的第一个字母中。

Answer 1

1. p 有一个右边距，而不是左边距。预期听起来像是他们正在确保 p 右侧的间隙等于它从 position:relative; 获得的左侧间隙。 left:10px 声明（用于为看起来像的连字符腾出空间）。

2. 绝对位置使其脱离流动，顶部：0，左侧：0，将是左上角。所以 top: auto 告诉它保持正常流动中自然具有的顶部空间，因此无论跨度自然落在段落中的任何位置，它都会在其顶部拾取该高度。 left:-1em 只是将它敲到左边 16px （如果这是设置的话），但左边的 0 将在父相对框的左边缘（距它的自然点左边 10px）。

我没有看到第三个问题。边界框可能很难找到，因为它是一个包含内联显示和绝对定位的跨度。