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

Question

Me encontré con un problema extraño. Uso DIV como contenedor y coloco una imagen en este DIV. Quiero que esta imagen se alinee verticalmente a la parte inferior. 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 "position: relative" a "position: absolute", la imagen no puede ser alineado a abajo más. ¿Es esto un error de Firefox3? ¿Como puedó resolver esté 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 quita el elemento de salir de donde está y lo coloca en relación con el elemento más interior que no está declarado estático Ya no participa en la alineación de ningún otro elemento, por lo que ya no sirve como celda de tabla (la declaración no tiene ningún efecto). Además, una declaración como top: 10px significa colocarla a mucha distancia de la parte superior de ese elemento que lo contiene.

Declarar un elemento como position: relative hace que una declaración como top: 10px signifique '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 aún determina la disposición de otros elementos.

Espero que esto responda a su pregunta.

Answer 2

También podría intentar establecer una posición: relativa; contenedor, que hace que el banner (la posición #banner: relativo; y la posición img: absoluta) luego establezca la posición absoluta para que esté abajo: 0, alineándolo al fondo del contenedor. Si se trata de toda la página, simplemente configure el ancho y alto del contenedor al 100% y elimine el relleno/margen adicional en el cuerpo o en el div.