Warum „display: table-cell“ wird gebrochen, als „position: absolute“

Question

Ich lief in ein seltsames Problem. Ich benutze DIV als Container und legte ein Bild in dieser DIV. Ich will das Bild vertikal nach unten ausgerichtet werden. Der folgende Code funktioniert.

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

Aber wenn ich die CSS-Code ändern „position: relativen“ auf „position: absolute“, kann das Bild nicht nach unten ausgerichtet werden, nicht mehr. Ist das ein Fehler von Firefox3? Wie kann ich dieses Problem lösen?

Meine aktuelle Lösung ist:

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

Aber ich weiß nicht, wie diese Lösung.

Answer 1

Kurze Antwort: Ändern

top: 60px; 

bottom: 60px;

Lange Antwort:

Die Erklärung position: absolute nimmt Ihr Element aus, wo immer sie ist, und legen Sie es in Bezug auf innerste Element, das nicht statisch deklariert wird. In nicht in der Ausrichtung von jedem der anderen Elemente mehr teilnehmen, damit sie nicht mehr als tabellenZelle dienen (die Erklärung hat keine Wirkung). Zusätzlich Erklärung wie top: 10px bedeutet dies, dass viel Abstand von der Oberseite des enthaltenden Elements zu setzen.

Deklarieren ein Element als position: relative Erklärung macht wie top: 10px bedeutet ‚das Element 10px von oben von der aktuellen Position bewegen.‘ Es ist möglich, Elemente relativ deklarierten mit anderen Elementen zu überlappen, obwohl Sie, dass die ursprüngliche Position noch erinnern, sollten die Anordnung anderer Elemente bestimmt.

Ich hoffe, Ihre Frage beantworten.

Answer 2

Sie können auch versuchen, eine Position einstellen: relative; Behälter, der das Banner macht (die Position #banner: relative, und die Position img: absolut) eingestellt, dann die absolute Position unten sein: 0, es auf den Boden des Behälters ausgerichtet wird. Wenn es die ganze Seite ist, setzen Sie einfach die Breite und Höhe des Behälters auf 100%, und entfernen Sie zusätzliche Polsterung / Marge auf dem Körper oder auf der div.