Por qué "display: table-cell" se rompe cuando "position: absolute"

Question

Me encontré con un problema extraño. Utilizo DIV como contenedor, y coloco una imagen en este DIV. Quiero que esta imagen se alinee verticalmente hacia abajo. El siguiente código funciona.

#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>

Pero si cambio el código css posición: relativo " en la posición " absoluta " ;, la imagen ya no se puede alinear en la parte inferior. ¿Es este un error de Firefox3? ¿Cómo puedo resolver este problema?

Mi solución actual es:

<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>

Pero no me gusta esta solución.

Answer 1

Respuesta corta: Cambio

top: 60px; 

a

bottom: 60px;

Respuesta larga:

La declaración position: absolute saca su elemento de donde está y lo coloca en relación con el elemento más interno que no se declara estático. Ya no participa en la alineación de ningún otro elemento, por lo tanto, ya no sirve como tabla-celda (la declaración no tiene efecto). Además, una declaración como top: 10px significa colocarla a tanta distancia de la parte superior del elemento que contiene.

Declarar un elemento como posición : relative hace una declaración como top: 10px significa "mover el elemento 10px desde la parte superior desde la posición actual". Es posible que los elementos declarados relativos se superpongan con otros elementos, aunque debe recordar que la posición original todavía determina la disposición de otros elementos.

Espero que esto responda a tu pregunta.

Answer 2

También puedes intentar establecer una posición: relativo; contenedor, que hace que el banner (la posición #banner: relativa; y la posición img: absolute) luego establezca la posición absoluta como inferior: 0, alineándolo con la parte inferior del contenedor. Si es la página completa, solo establece el ancho y la altura del contenedor en 100%, y elimina el relleno / margen extra en el cuerpo o en la división.