Używanie pozycji względnej / absolutnej w TD?

Mam następujący kod: 

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>
To w ogóle nie działa. Z jakiegoś powodu polecenie position:relative nie jest odczytywane w TD, a notice DIV jest umieszczany poza kontenerem zawartości na dole mojej strony. Próbowałem umieścić całą zawartość TD w DIV takim jak: 
<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>
Jednakże stwarza to nowy problem. Ponieważ wysokość zawartości komórki tabeli jest zmienna, div notice nie zawsze znajduje się na dole komórki. Jeśli a komórka tabeli rozciąga się poza znacznikiem 60px, ale żadna z innych komórek tego nie robi, a następnie w innych komórkach div notice jest na 60px w dół, zamiast na dole.
Author: Jason Axelrod, 2010-12-30
Source

5 answers

Dzieje się tak dlatego, że zgodnie z CSS 2.1 wpływ position: relative Na elementy tabeli jest niezdefiniowany. Na przykład, position: relative ma pożądany efekt na Chrome 13, ale nie na Firefox 4. Twoim rozwiązaniem jest dodanie div wokół treści i umieszczenie {[0] } Na tym div zamiast td. Poniżej przedstawiono wyniki uzyskiwane z position: relative (1) na div Dobre), (2) na td (złe), i wreszcie (3) na div wewnątrz td (dobre ponownie).

Na Firefoksie 4

Dla odniesienia, tutaj jest źródło HTML.

 174
Author: avernet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-28 22:21:46

Ta sztuczka również nadaje się, ale w tym przypadku właściwości wyrównania (środek, dół itp.) nie będzie działać.

<td style="display: block; position: relative;">
</td>
 5
Author: Sergey Onishchenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-12 12:12:25

Jeśli chodzi o drugą próbę, próbowałeś użyć vertical align ? Albo 

<td valign="bottom">

Lub z css 

vertical-align:bottom
 2
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-30 17:28:34

Zawartość komórki tabeli, zmienna wysokość, może być większa niż 60px; 

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

 2
Author: Xavier Deva Arul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-25 04:29:17

Działa również, jeśli wykonasz "display: block;" na td, niszcząc tożsamość td, ale działa!

 -1
Author: daigorocub,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-10 20:38:38