Perché & # 8220; display: table-cell & # 8221; viene interrotto quando & # 8220; posizione: assoluto & # 8221;

Question

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.

Answer 1

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.

Answer 2

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.