Un div con posizione relativa su un galleggiante div

Non capisco perché un div con float destro o sinistro non sia sopra un div con posizione relativa o definito con un colore di sfondo quando l'ultimo viene dichiarato dopo.Un div con posizione relativa su un galleggiante div

Ecco il codice html:

<html> 
<body> 
    <div class="container"> 
     Main container <br/><br/> 

     <div class="header">This is the header</div> 
     <div class="text-right">Right text</div> 
     <div class="footer">This is the footer</div> 
    </div> 
</body>

E qui è il css:

.header { 
    background-color:blue; 
    border: solid; 
    color: white; 
    border-color:black; 
    height: 100px; 
} 

.text-right{ 
    float: right; 
    border: solid; 
    background-color: green; 
} 

.container{ 
    padding: 10px; 
    border: solid; 
} 

.footer{ 
    padding-top: 50px; 
    border: solid; 
    background-color: yellow; 
    position: relative; 
}

So che posso usare un .clear: entrambi regola per correggere questo problema, ma il mio punto principale è: perché quando imposto il colore di sfondo o la posizione o entrambi nella regola .footer, il div float si trova sotto il piè di pagina?

Grazie mille!

fonte

2011-12-22 Samuel

Ecco un esempio JSFiddle minimalista che mostra lo stesso problema: http://jsfiddle.net/5Kefa/5/ – KajMagnus

Durante la lettura di questo ottimo post, alla fine del post, L'autore parla del lavoro interno z-order, ma dicono anche che se volete saperne di più, this next one will be a much more detailed article

Il punto chiave è che il ordine nell'asse z in cui sono posizionati gli elementi.

Ecco ciò che l'autore dice:

Se non si specifica alcun valore z-index, il default ordine impilamento dal più vicino all'utente per più lontana indietro è la seguente:
1. Positioned elements, in order of appearance in source code 
2. Inline elements 
3. Non-positioned floating elements, in order of appearance in source code 
4. All non-positioned, non-floating, block elements in order of source code 
5. Root element backgrounds and borders 

Come si può vedere, gli elementi posizionati (1) sono sempre in cima a elementi non posizionati (3-4). Se metto un div con una sola proprietà float, questo elemento non sarà "posizionato" sulla superficie.

In questo caso, il secondo elemento, il mio piè div, che è posizionato con un valore di proprietà relativo sarà in cima quella precedente non solo non aggiungo una proprietà clear: both dopo che la proprietà floatdiv o perché l'ultimo viene aggiunto dopo l'elemento flottante ma perché è posizionato!

Come detto powerbuoy, è necessario impostare aggiungere una posizione relativa all'elemento float per poter andare in cima alla pila dell'elemento mobile. Ma non è abbastanza. Poiché questi due elementi sono ora allo stesso livello e poiché entrambi si incrociano, è necessario indicare al motore quale sarà il primo ed è per questo che è necessario impostare nuovamente l'ordine z su 1 sull'elemento mobile come detto PowerBuoy.

Non sono un ottimo scrittore e per questo motivo, consiglio vivamente di leggere gli articoli di riferimento che ho menzionato in precedenza. Penso che avrai una spiegazione molto approfondita del caso.

fonte

2011-12-24 16:16:44 Samuel

Mi spiace accettare la mia domanda, ma penso che questa sia la risposta corretta e nessuno ha detto il contrario. – Samuel

((Grazie molte per aver postato questa risposta dettagliata!)) – KajMagnus

Considerando http://jsfiddle.net/wxMhx/. Hmm, se aggiungi 'position: relative;' a 'id = text-right', quindi' id = footer' appare ancora sopra 'text-right'. Anche se l'elem flottante ora ha 'position: relative', quindi sia l'elem flottante che il' id = footer' sono posizionati. Quindi si dovrebbe applicare la regola 1? - ** Tuttavia ** l'elem floating appare ** first ** nella sorgente, e quindi dovrebbe essere impilato ** sopra ** il 'id = footer' (secondo la regola 1) nell'esempio, giusto? Perché allora è il 'id = text-right', tuttavia nascosto dal' footer', strano. (Questo con la regola z-index rimossa) (Google Chrome 19) – KajMagnus

Poiché il piè di pagina viene dopo il testo-destra verrà visualizzato sopra a destra del testo. Per evitare questo si può dare il testo-destra un z-index (e una posizione diversa da statica):

http://jsfiddle.net/wxMhx/

Edit: hmmm ... no che non è del tutto corretto. Se rimuovi la posizione: relativo; dal testo del piè di pagina, a destra verrà visualizzato sopra. TBH Non sono sicuro che lo causa il. Ma la soluzione in entrambi i casi è quella di rimuovere la posizione: relativa; dal piè di pagina, o aggiungilo (così come un indice z) a testo-destra.

fonte

2011-12-22 13:47:45 powerbuoy

Grazie per il vostro tempo ... Ho letto molto sul web e ho trovato questa frase: "Quindi il comportamento è inteso come prima cosa lo fa galleggiare e influenza altri elementi in quel punto e solo dopo lo sposta in una nuova posizione spostata senza influenzare nuovamente la posizione degli altri elementi ". Con quello che hai detto, quello che capisco è che quando posizioni un flo div seguito da un altro div con posizione relativa, l'ultimo nasconderà il precedente se è impostato un colore di sfondo. È una situazione comune o ho incasinato qualcosa? – Samuel

Anche senza testo di immagine di sfondo-destra è dietro il piè di pagina, ma è ancora visibile perché non c'è nulla di reso sopra di esso. Posizione: penso che sia ciò che innesca la stratificazione. Temo di non sapere perché, però. Ma sarei interessato a saperlo. – powerbuoy

Perché position: relative. Se elimini questa linea, vedrai div con la classe text-right. È possibile impostare la classe z-index: -1; a footer e questo dovrebbe funzionare bene.

fonte

2011-12-22 13:51:59 Lucas

Grazie, ma come ho detto nella mia domanda, voglio sapere perché questo accada, non come correggere il problema. – Samuel

Un div con posizione relativa su un galleggiante div

risposta

Problemi correlati