我可以合併position：relative和float：left？

Question

我可以在一個元素上同時應用position: relative和float: left嗎？就像這樣：

div { 
    float: left; 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 

Answer 1

是的。

CSS2.1, 9.4.3：

「一旦根據正常流動或一個盒子已經被佈置漂浮， 它可以相對於該位置錯開這被稱爲相對定位」

Answer 2

我可以申請相對位置和左浮動一個元素？

是的。試試看。

Answer 3

我想提供一個不同的答案，以防情況可能有所幫助。我有兩個並排的div，我想他們佔用空間：

<div class="col-md-12"> 
    <div class="col-md-6">stuff</div> 
    <div class="col-md-6">other stuff</div> 
</div> 

我用我的所有浮動的人之後將<div class="clear"></div>做到這一點。這用於工作，因爲.clear { clear: both; }將解決問題。這不再適用於我。相反，I followed these instructions並添加這個類來我的容器：

.noFloat { 
    width: 100%; 
    overflow: auto; //If you get a scroll bar, try overflow: hidden; 
    float: none; 
} 

，所以我結束了：

<div class="col-md-12 noFloat">...</div> 

這裏是一個bootply.com例如鏈接：http://www.bootply.com/EupCHRhV4s

Answer 4

是，你可以使用兩者。

您將使用float:left將元素定位到左側並允許下一個元素定位到此的右側。

position:relative會影響自己和它的孩子，採取自己的立場。當您使用left:npx;top:npx時，它會將此元素左移，右移，上移和下移。

您可以檢查此演示：聲稱，你可以結合浮動和位置實際上是不正確jsfiddle link

Answer 5

的答案。是的，浮動div的位置確實會移動，但周圍的文本不會像您期望的那樣流動。問題是位置屬性有效地留下了一個白色框，在那裏你浮動的div曾經是div，然後將div移動到其他地方，將框留在後面。換句話說，當你想讓文本在新的位置圍繞div流動時，你會將div放在文本的頂部。

下面是具有簡單的浮一個div的示例：右

這裏的同一div的一個例子，但與位置：相對;和top :.75in;補充：

注意盒子現在是如何坐在文本的頂部。這可能不是你想要的！