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

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

---

이는 CSS 2.1 에 따르면 position: relative테이블 요소에 대한 효과 가 정의되지 않았기 때문 입니다. 이러한 예시, position: relative크롬 (13)에 원하는 효과를 가지고 있지만 파이어 폭스에 4. 여기에 귀하의 솔루션은을 추가하는 div콘텐츠 중심과를 넣어 position: relative그에 div대신의 td. 다음은 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>

---

이 트릭도 적합하지만이 경우 정렬 속성 (중간, 하단 등)이 작동하지 않습니다.

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

---

두 번째 시도와 관련하여 수직 정렬을 사용해 보셨습니까? 어느 한 쪽

<td valign="bottom">

또는 CSS로

vertical-align:bottom

---

테이블 셀의 내용, 가변 높이는 60px 이상일 수 있습니다.

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

---

"display : block;"을 수행하는 경우에도 작동합니다. td에서 td 정체성을 파괴하지만 작동합니다!

참고 URL : https://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td