如何使用绝对和相对位置制作此更改栏？

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。这就是Layer Layer Section之前的例子。

在玩了一些之后，我甚至不知道这个改变栏的作用。它是“THIS”和“word”之间的跨度。有一件事是清楚的：它总是与“单词”这个词在同一条线上。不一定在最后一行。

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

1. 在CSS for p tag中。该代码的作者说他使用margin-left：10px“预期”的偏移量（相对位置左：10px）。为什么期待？这两个人不要互相冲突吗？

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

没有LEFT：-1em。看起来条形图卡在最后一行第一个单词的第一个字母中。

Answer 1

1. p有一个边距，而不是左边距。预期听起来好像他们确保p的右边有一个间隙，它等于左边的间隙，它从位置得到：相对; left：10px声明（用于为连字符腾出空间）。

2. 绝对位置使其脱离流量，顶部：0，左：0，将是左上角。所以顶部：auto告诉它保持顶部的空间，它自然会有正常的流量，所以当跨度自然落入段落的任何地方时，它都会在它的高度上移动。停。左边：-1em只是按你说的16px（如果那个设置）向左敲，但是左边的0将在父亲相对框的左边缘（它的左边10px＆＃39） ; s自然景点）。

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