使用'position：absolute`和`float：left`時的預期行爲是什麼？

使用position: absolute和float:left在一起，看起來像一個有點混亂，甚至是荒謬的，因爲position: absolute不會影響兄弟元素的位置，同時float:left會影響兄弟浮動元素的位置。使用'position：absolute`和`float：left`時的預期行爲是什麼？

但是，在CSS中允許一起使用它們，那麼期望的行爲是什麼？我不太確定如果使用它們兩者，會發生什麼情況，因爲MDN文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/float）中未描述它們。

有沒有人有任何想法呢？謝謝！

來源

2016-03-05 Hanfei Sun

你應該建立一些測試用例並整理出來。一起使用它們看起來完全錯誤 - 我認爲這個位置：絕對將會「覆蓋」對兄弟姐妹的影響，並且它會導致該元素基本上不會在頁面上的其他元素的位置上佔據「空間」。 –

它在CSS2說明書中討論的（https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo）：

否則，如果 '位置' 具有值 '絕對' 或 '固定'，則框是定位的絕對位置爲，'float'的計算值爲'none'，並根據下表設置顯示爲。該框的位置將由'頂部'，'右'，'底部'和'左'屬性以及框的包含塊確定的。

所以得出的結論是，float設置爲none強制時position的值爲absolute。

來源

2016-03-08 06:02:48

將float:left;添加到absolute定位元素顯然不會添加元素的任何行爲變化。大多數display屬性的情況也是如此。例如，添加display:inline;不會導致失去其維度。

它也沒有顯示與相鄰浮動元素的任何連接。

.box{ 
 
    border: 1px solid red; 
 
    float: left; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.box1{ 
 
    border: 1px solid green; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
    display: table; 
 
}

<div class="box"></div> 
 
    <div class="box1"></div>

但是，當在相鄰的元件的float被移除時，絕對定位元件定位在其下方。

.box{ 
 
    border: 1px solid red; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.box1{ 
 
    border: 1px solid green; 
 
    height: 100px; 
 
    width: 100px; 
 
    position: absolute; 
 
    display: table; 
 
}

<div class="box"></div> 
 
    <div class="box1"></div>

來源

2016-03-05 15:48:06

使用'position：absolute`和`float：left`時的預期行爲是什麼？

回答

相關問題