Perché & # 8220; display: table-cell & # 8221; viene interrotto quando & # 8220; posizione: assoluto & # 8221;
Domanda
Ho riscontrato uno strano problema. Uso DIV come contenitore e inserisco un'immagine in questo DIV. Voglio che questa immagine sia allineata verticalmente verso il basso. Il seguente codice funziona.
#banner {
width: 700px;
height: 90px;
top: 60px;
left: 178px;
overflow: hidden;
text-align: center;
display: table-cell;
vertical-align: bottom;
position: relative;
}
<div id="banner">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>
Ma se cambio il codice css " position: relative " in "posizione: assoluta", l'immagine non può più essere allineata in basso. È un bug di Firefox3? Come posso risolvere questo problema?
La mia soluzione attuale è:
<div id="banner">
<table width="100%" height="100%"><tr><td valign="bottom" align="center">
<img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</td></tr></table>
</div>
Ma questa soluzione non mi piace.
Soluzione
Risposta breve: Cambia
top: 60px;
a
bottom: 60px;
Risposta lunga:
La dichiarazione position: absolute
estrae il tuo elemento da qualsiasi luogo si trovi e lo posiziona rispetto all'elemento più interno che non è dichiarato statico. Non partecipare più all'allineamento di nessun altro elemento, quindi non serve più come cella di tabella (la dichiarazione non ha alcun effetto). Inoltre, una dichiarazione come top: 10px
significa posizionarla a così tanta distanza dalla cima dell'elemento contenente.
Dichiarando un elemento come position: relative
rende una dichiarazione come top: 10px
significa 'sposta l'elemento 10px dall'alto dalla posizione corrente'. È possibile che gli elementi dichiarati relativi si sovrappongano con altri elementi, sebbene si ricordi che la posizione originale determina ancora la disposizione di altri elementi.
Spero che questo risponda alla tua domanda.
Altri suggerimenti
Puoi anche provare a impostare una posizione: relativo; container, che rende il banner (la posizione #banner: relativo; e la posizione img: assoluta) quindi imposta la posizione assoluta su bottom: 0, allineandola alla parte inferiore del container. Se è l'intera pagina, basta impostare la larghezza e l'altezza del contenitore al 100%, e rimuovere un'ulteriore imbottitura / margine sul corpo o sul div.