Dlaczego "display: table-cell" jest uszkodzony, gdy "position: absolute"

Question

Wpadłem na dziwny problem. Używam DIV jako kontenera i umieszczam obraz w tym DIV. Chcę, aby ten obraz był wyrównany pionowo do dołu. Poniższy kod działa.

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

Ale jeśli mogę zmienić kod CSS „position: relative” na „position: absolute”, obraz może nie być wyrównane do dołu dłużej. Czy to błąd przeglądarki Firefox3? Jak mogę rozwiązać ten problem?

Moje obecne rozwiązanie jest:

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

Ale nie podoba mi się to rozwiązanie.

Answer 1

Krótka odpowiedź: Zmień

top: 60px; 

do

bottom: 60px; 

Długa odpowiedź:

Deklaracja position: absolute bierze swój elementu się od gdziekolwiek jest i umieścić go w stosunku do najbardziej wewnętrznej elementu, który nie jest zadeklarowany jako statyczny. Nie uczestniczą już w wyrównaniu żadnego innego elementu, dlatego nie służą już jako komórka tabeli (deklaracja nie ma żadnego skutku). Ponadto deklaracja taka jak top: 10px oznacza umieszczenie jej na tak dużej odległości od wierzchołka tego elementu zawierającego.

Zgłaszanie elementu jako position: relative powoduje, że deklaracja taka jak top: 10px oznacza "przenieś element 10px od góry z bieżącej pozycji". Możliwe jest zadeklarowanie elementów względem nakładania się z innymi elementami, chociaż należy pamiętać, że pierwotna pozycja nadal determinuje rozmieszczenie innych elementów.

Mam nadzieję, że to odpowiedź na twoje pytanie.

Answer 2

Możesz także spróbować ustawić pozycję: względną; kontener, który sprawia, że ​​baner (pozycja #banner: względna i img pozycja: absolute), a następnie ustawia pozycję absolutną na bottom: 0, wyrównując ją do dna kontenera. Jeśli jest to cała strona, po prostu ustaw szerokość i wysokość pojemnika na 100% i usuń dodatkowe wypełnienie/margines na ciele lub na div.