Kann ich position: relative und float kombinieren: links?

Question

Kann ich sowohl position: relative als auch auf ein Element anwenden? Wie folgt aus:

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

Answer 1

Ja.

CSS2.1, 9.4.3:

„Sobald ein Kasten wurde nach dem normalen Fluß ausgebreitet oder schwammen, es um diese Position relativ verschoben werden kann, Dies wird als relative Positionierung“

Answer 2

Könnte ich Position relativ anwenden und Schwimmer auf ein Element links?

Ja. Versuch es.

Answer 3

Ich möchte eine andere Antwort geben, falls es jemandem helfen könnte. Ich hatte zwei nebeneinander divs, dass ich wollte, dass sie Platz nehmen:

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

habe ich dies zu tun, indem <div class="clear"></div> nach all meinen floating diejenigen anwenden. Dies funktioniert, weil .clear { clear: both; } das Problem lösen würde. Das funktioniert nicht mehr für mich. Stattdessen I followed these instructions und hinzugefügt, um diese Klasse zu meinem Behälter:

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

so landete ich mit:

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

Hier ist ein Link zu einem bootply.com Beispiel: http://www.bootply.com/EupCHRhV4s

Answer 4

Ja Sie können beides verwenden.

Verwenden Sie float:left, um das Element auf der linken Seite zu positionieren und das nächste Element auf der rechten Seite zu positionieren.

position:relative wird sich auswirken und es ist Kinder, eigene Position zu nehmen. Wenn Sie left:npx;top:npx verwenden, wird dieses Element nach links, rechts, oben und unten verschoben.

können Sie diese Demo überprüfen: jsfiddle link

Answer 5

Die Antworten, die, dass Sie Anspruch Schwimmer kombinieren und Position sind tatsächlich falsch. Ja, die Position des schwebenden div wird sich zwar bewegen, aber der umgebende Text wird nicht wie erwartet fließen. Das Problem ist, dass die Positionsattribute effektiv eine weiße Box hinterlassen, in der das div, das du schwebst, war, und verschiebt das div dann woanders hin und lässt die Box zurück. Anders ausgedrückt: Sie positionieren Ihr div über dem Text, wenn Sie wahrscheinlich möchten, dass der Text an der neuen Position um das div herum fließt.

Hier ist ein Beispiel für ein div, die einen einfachen Schwimmer hat: rechts

Hier ist ein Beispiel aus dem gleichen div, aber mit position: relative; und oben:75 Zoll; hinzugefügt:

Beachten Sie, wie die Box jetzt auf dem Text sitzt. Das ist wahrscheinlich nicht das, was du willst!