Posso combinare la posizione: relativa e float: sinistra?

Question

Posso applicare sia position: relative sia float: left su un elemento? Come questo:

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

Answer 1

Sì.

CSS2.1, 9.4.3:

"Una volta che una casella è stato allestito secondo il flusso normale o galleggiavano, esso può essere spostato rispetto a questa posizione Questo è chiamato posizionamento relativo"

Answer 2

Potrei applicare posizione relativa e galleggiare a sinistra su un elemento?

Sì. Provalo.

Answer 3

Desidero fornire una risposta diversa nel caso in cui possa aiutare qualcuno. Ho avuto due fianco a fianco div che volevo loro di prendere lo spazio:

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

ho usato per farlo applicando <div class="clear"></div> dopo tutti i miei quelli galleggianti. Questo funzionava perché .clear { clear: both; } avrebbe risolto il problema. Questo non funziona più per me. Invece, I followed these instructions e ha aggiunto questa classe per il mio contenitore:

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

così ho finito con:

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

Ecco un link ad un esempio bootply.com: http://www.bootply.com/EupCHRhV4s

Answer 4

Sì , Puoi usare entrambi.

Si utilizzerà float:left per posizionare l'elemento sul lato sinistro e consentire all'elemento successivo di posizionarsi sul lato destro di questo.

position:relative si ripercuoterà su se stesso e sui suoi figli, per prendere la propria posizione. quando utilizzerai lo left:npx;top:npx, questo elemento verrà spostato a sinistra, a destra, in alto e in basso.

È possibile controllare questa demo: jsfiddle link

Answer 5

Le risposte che sostiene che è possibile combinare galleggiante e la posizione sono in realtà errata. Sì, la posizione del div floating si muoverà effettivamente, ma il testo circostante non scorrerà come previsto. Il problema è che gli attributi di posizione lasciano effettivamente una casella bianca in cui è utilizzato il div che stai galleggiando, quindi sposta il div altrove, lasciando il riquadro dietro. In altre parole, posizionerai il tuo div in cima al testo, quando probabilmente vorrai che il testo scorra attorno al div nella sua nuova posizione.

Ecco un esempio di un div che ha un semplice float: right

Ecco un esempio della stessa div, ma con position: relative; e in alto :.75in; aggiunto:

Si noti come la casella è ora seduto in cima al testo. Probabilmente non è quello che vuoi!