[解決済み] TDでPosition Relative/Absoluteを使うには？

質問

次のようなコードがあります。

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

これは全く機能しません。何らかの理由で、position:relativeコマンドがTD上で読み込まれず、通知DIVがページ下部のコンテンツコンテナの外側に配置されているのです。私は、TDのすべてのコンテンツを次のようなDIVに置くことを試みました。

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

しかし、これによって新たな問題が発生します。テーブルセルのコンテンツの高さは可変であるため、通知DIVは常にセルの底にあるわけではありません。テーブルセルが60pxマーカーを超えて伸びるが、他のセルはどれも伸ばさない場合、他のセルでは、通知DIVは底ではなく、60px下の位置にある。

どのように解決するのですか？

これは CSS 2.1 の効果は position: relative の効果は未定義です。図解すると position: relative は、Chrome 13では望ましい効果をもたらしますが、Firefox 4ではそうではありません。ここでの解決策は div をコンテンツの周囲に置き、その上に position: relative をその上に div の代わりに td . を使用した場合の結果を以下に示します。 position: relative (1) の上に div good)、(2)は td (良くない)、最後に(3)は div の中に td (の中に入れてください（またまたうまい）。

<イグ

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>