絕對行內元素的位置不同

我嘗試將行內元素絕對定位到父行內聯元素。但由於某些未知原因，父元素比它看起來大。如果您嘗試以下操作，您會看到絕對的右側定位元素將位於父元素之外。如果使用width：100％，這會使子元素大於父元素，這也會成爲問題。在Firefox 52絕對行內元素的位置不同

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

來源

2017-06-20 Nico Richter

首先，如果沒有至少一個內嵌塊元素，您無法正確使用絕對位置。然後還要記住，一旦你放置位置絕對元素，他們就會失去他們的「區域」。所以，如果你正在做這件事，如果你需要一些設置寬度或高度的父集。 – Adrianopolis

您的問題經測試的是你正在內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;

你可以做display: inline-block，以及如果你希望它只是一樣寬，父DIV。

編輯附錄：內跨度不會像它們在外部跨度，因爲他們是position: absolute，這意味着它們的定位是絕對的，沒有他們的父母將重塑因爲有了他們。由於他們的父母是position: relative，他們的絕對定位是相對於他們的父母，但他們實際上不會在他們的父母，當涉及到使父母div更大。另一個可能的解決方案，將有父母包括文本內的元素是：

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

來源

2017-06-20 15:35:48

op談論第二個子元素的轉變 –

我更新了答案以反映 –

經過一番研究，我認爲我得到了問題。這是因爲內聯元素末尾的空白。如果您在此代碼中刪除所有空格，則結果是預期的結果。或者你可以使用一些其他的黑客：

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

是不是還有其他的解決方案，修剪開頭和結尾的空格？爲什麼瀏覽器呈現這些空格？是否有另一種代碼美化方法比空白？

來源

2017-06-21 09:35:05

絕對行內元素的位置不同

回答

相關問題