Question

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

＆＃13;

<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>

＆＃13;

Answer 1

你的问题是你正在使内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，这意味着它们的定位是绝对的，他们的父母都不会重塑因为他们由于它们的父级是position: relative，它们的绝对定位是相对于它们的父级，但是当它们使父级div变大时，它们实际上不会在它们的父级内部。另一个可能的父解决方案包括元素中的文本：

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

Answer 2

经过一番研究后，我认为我遇到了问题。这是因为内联元素末尾的空格。如果删除此代码中的所有空格，则结果为预期的空格。或者你可以使用其他一些黑客：

＆＃13;

<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>

＆＃13;

还没有任何其他解决方案来修剪前导和尾随空格吗？为什么浏览器会渲染这些空格？还有其他代码美化方法而不是空格吗？

绝对内联元素的位置不同

2 个答案: