html - 绝对内联元素的位置不同

Question

我尝试将内联元素绝对定位到父内联元素。但是由于某些未知原因，父元素比看起来要大。如果您尝试以下操作，您将看到绝对右定位元素将在父元素之外。如果您使用 width: 100% 这将使子元素大于父元素，这也会成为一个问题。在 Firefox 52 中测试。

<span style="position:relative;">same position
	  <span style="position:absolute; top:100%; left:0;">same position</span>
	  <span style="position:absolute; top:200%; right:0;">same position</span>
	</span>

Answer 1

你的问题是你正在使内部 span 相对于外部 span 是绝对的。由于外跨只有两个字，所以也就那么宽。

<span style="position:relative;width: 100%;display: block;">same position
    <span style="position:absolute; top:100%; left:0;">same position</span>
    <span style="position:absolute; top:100%; right:0;">same position</span>
</span>

这是您想要的代码。现在，外部跨度的宽度为 100%，两个内部跨度将相对于更宽的跨度，现在您可以在 top:100% 处拥有正确的跨度，除非你想要它进一步下降。但是，一旦您使跨度具有 display:block，您还不如将其设为 div 而没有 width: 100%;display: block;

如果您希望它只与父 div 一样宽，您也可以执行 display: inline-block。

编辑 附录:内部跨度看起来不像在外部跨度中，因为它们是position: absolute，这意味着它们的定位是绝对的，没有他们的 parent 会因为他们而 reshape 。由于它们的父元素是 position: relative，它们的绝对定位是相对于它们的父元素的，但当涉及到使父元素 div 变大时，它们实际上不会在它们的父元素中。让父级在元素中包含文本的另一种可能的解决方案是:

<div>
    same position
    <div style="">same position</div>
    <div style="float: right;">same position</div>
</div>