Warum "display: table-cell" defekt ist, wenn "position: absolute"

Question

Ich hatte ein seltsames Problem. Ich benutze DIV als Container und lege ein Bild in diesen DIV. Ich möchte, dass dieses Bild vertikal nach unten ausgerichtet ist. 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 nicht mehr ausgerichtet werden. 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; 

zu

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 wird nicht als statisch deklariert. An der Ausrichtung eines anderen Elements nicht mehr beteiligt, daher dient es nicht mehr als Tabellenzelle (die Deklaration hat keine Wirkung). Eine Deklaration wie top: 10px bedeutet darüber hinaus, es so weit von der Spitze dieses enthaltenden Elements zu platzieren.

Wenn ein Element als position: relative deklariert wird, wird eine Deklaration wie top: 10px bedeutet 'Bewegen Sie das Element 10px von oben von der aktuellen Position'. Es ist möglich, dass Elemente, die relativ deklariert werden, mit anderen Elementen überlappen, obwohl Sie daran denken sollten, dass die ursprüngliche Position immer noch die Anordnung anderer Elemente bestimmt.

Ich hoffe, dass diese Ihre Frage beantworten.

Answer 2

Sie können auch versuchen, eine Position zu setzen: relativ; container, der das Banner erstellt (die Position #banner: relativ; und die Position img: absolut), dann wird die absolute Position auf den unteren Wert gesetzt: 0, indem sie auf den Boden des Containers ausgerichtet wird. Wenn es die ganze Seite ist, setze einfach die Breite und Höhe des Containers auf 100% und entferne zusätzliche Polsterung/Rand auf dem Körper oder auf dem Div.