Por “display: table-cell” é quebrada quando “position: absolute”

Question

Eu corri para um problema estranho. Eu uso DIV como um recipiente, e colocar uma imagem a este DIV. Eu quero isso para ser alinhado verticalmente para baixo. O seguinte 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>

Mas se eu alterar o código css "position: relative" para "position: absolute", a imagem não pode ser alinhado para baixo mais. Este é um bug de Firefox3? Como posso resolver este problema?

Minha solução atual é a seguinte:

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

Mas eu não gosto dessa solução.

Answer 1

Resposta curta: Mudança

top: 60px; 

para

bottom: 60px;

Resposta longa:

O position: absolute declaração leva o seu elemento para fora de onde quer que seja e colocá-lo em relação ao elemento mais interno que não é declarada como estática. Em não participar no alinhamento de qualquer outro elemento, portanto, já não servem de-célula da tabela (a declaração tem nenhum efeito). Além disso, declaração como meio top: 10px para colocá-lo que muito distância do topo desse contendo elemento.

declarando um elemento como position: relative faz declaração, tais como meios top: 10px 'mover o elemento 10px da parte superior a partir da posição actual'. É possível que elementos declarados em relação à sobreposição com outros elementos, embora você deve se lembrar que a posição original ainda determina o arranjo de outros elementos.

Espero que esta resposta à sua pergunta.

Answer 2

Você também pode tentar definir uma posição: relative; recipiente, o que faz com que a bandeira (a posição #banner: relativa; e a posição IMG: absoluta), em seguida, definir a posição absoluta para ser inferior: 0, alinhando-o para o fundo do recipiente. Se é a página inteira, apenas definir a largura e altura do recipiente a 100%, e remover extra Hábito / margem sobre o corpo ou sobre a div.