我尝试将内联元素绝对定位到父内联元素。但是由于某些未知原因,父元素比看起来要大。如果您尝试以下操作,您将看到绝对右定位元素将在父元素之外。如果您使用 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>
最佳答案
你的问题是你正在使内部 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>
关于html - 绝对内联元素的位置不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44657185/