Используя Позицию Относительно / Абсолют в пределах TD?

Question

У меня есть следующий код:

<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: относительная не читается на 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 не всегда находится внизу ячейки. Если ячейка таблицы выходит за пределы маркера 60 пикселей, но ни одна из других ячеек этого не делает, то в других ячейках DIV уведомления находится на 60 пикселей ниже, а не внизу.

Answer 1

Это связано с тем, что согласно CSS 2.1 влияние position: relative на элементы таблицы не определено.В качестве иллюстрации этого, position: relative оказывает желаемый эффект на Chrome 13, но не на Firefox 4. Ваше решение здесь состоит в том, чтобы добавить div вокруг вашего контента и поставить position: relative на этом div вместо * 1008.*.Следующее иллюстрирует результаты, которые вы получаете с position: relative (1) на div хорошо), (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>

Answer 2

Этот прием также подходит, но в этом случае свойства выравнивания (середина, низ и т. Д.) Работать не будут.

<td style="display: block; position: relative;">
</td>

Answer 3

Содержимое ячейки таблицы, переменной высоты, может быть больше 60 пикселей;

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

Answer 4

Что касается вашей второй попытки, вы пытались использовать вертикальное выравнивание?

1002

или css

1005 *

Answer 5

также работает, если вы делаете «display: block;» на тд, уничтожая тд идентичность, но работает!