css - 这个变化条是如何使用绝对和相对位置制作的？

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。

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

Answer 1

1. p 有右边距，没有左边距。预期听起来他们正在确保 p 右侧的间隙等于它从 position:relative; 到左侧的间隙。 left:10px 声明(用于为看起来像的连字符腾出空间)。

2. 绝对位置使其脱离流程，top: 0, left: 0 将是左上角。所以 top: auto 告诉它保持顶部的空间，它在正常流程中自然会有这样的空间，所以无论跨度自然地落在段落中的什么地方，它都会在它的顶部拾取那个高度。 left:-1em 就像你说的那样将它敲到左边 16px(如果那是设置)，但是 left 0 将在父相对框的左边缘(它是自然点左边 10px)。

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