[html] TD 내에서 위치 상대 / 절대 위치를 사용하십니까?

다음 코드가 있습니다.

<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 아래에 있습니다.

답변

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

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

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

<td valign="bottom">

vertical-align:bottom