Pourquoi & # 8220; afficher: table-cell & # 8221; est cassé lorsque & # 8220; position: absolute & # 8221;

Question

J'ai rencontré un problème étrange. J'utilise DIV comme conteneur et je mets une image dans cette DIV. Je veux que cette image soit alignée verticalement vers le bas. Le code suivant fonctionne.

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

Mais si je change le code CSS "position: relative" Pour "positionner: absolu", l’image ne peut plus être alignée en bas. Est-ce un bug de Firefox3? Comment puis-je résoudre ce problème?

Ma solution actuelle est la suivante:

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

Mais je n'aime pas cette solution.

Answer 1

Réponse courte: Changer

top: 60px; 

à

bottom: 60px;

Réponse longue:

La déclaration position: absolute prend votre élément où qu'il se trouve et le place par rapport à l'élément le plus interne qui n'est pas déclaré statique. Pour ne plus participer à l'alignement d'aucun autre élément, il ne sert donc plus de cellule de tableau (la déclaration n'a aucun effet). De plus, une déclaration telle que top: 10px signifie qu’elle doit être placée à une distance aussi grande que celle du haut de cet élément.

Déclarer un élément en tant que position: relatif permet une déclaration telle que top: 10px signifie "déplace l'élément 10px du haut de la position actuelle". Il est possible que des éléments déclarés relatifs se chevauchent avec d'autres éléments, même si vous devez vous rappeler que la position d'origine détermine quand même la disposition des autres éléments.

J'espère que cela répond à votre question.

Answer 2

Vous pouvez également essayer de définir une position: relative; container, qui crée la bannière (position #banner: relative; et img position: absolute), puis définit la position absolue sur bottom: 0, en l'alignant sur le bas du conteneur. S'il s'agit de la page entière, définissez simplement la largeur et la hauteur du conteneur sur 100%, puis supprimez les marges / marges supplémentaires sur le corps ou sur le div.