본문 바로가기

Local Oriented/HTML CSS JS

position CSS 는 table 태그류와는 맞지 않고 div 쪽으로는 잘 맞네요


블럭 단위로 CSS 를 사용하여 좌표에 대해서 조정이 필요할때,
이를테면 화면에서 B 블럭이 A 블럭 안에서 일정 거리를 두고 표시되어야 할때..
최근의 HTML 태그는 div 를 주로 사용하니까 문제는 없고요.
table 태그가 들어간 이전 HTML 태그들과 섞여 있는 화면이라면..
table 의 td 안에 div 로 B 블럭을 구현하려고 할 거에요.
이게 IE 에서는 잘 맞아 들어가는데,
IE 이외의 웹브라우저에서는 소용없는 짓이죠. ㅠ.ㅠ

그래서 이럴때는.. table 태그 안에 div 로 A 블럭을 만들고 그 안에 B 블럭을 만들면서..
A 블럭에는 position:relative 를, B 블럭에는 position:abolute 를 해 주어야 하는 거죠.

<table>
  <tr>
    <td style="position:relative">
      <div style="position:absolute; left:100px; top:100px">
        ..
      </div>
    </td>
  </tr>
</table>

상기와 같은 코드로는 IE 에서는 제대로 표현이 되지만 IE 이외의 웹브라우저에서는 제대로 안 된다는 거에요.
이때는 아래와 같이 코드를 심어 주어야 한다는 겁니다.
<table>
  <tr>
    <td>
      <div style="position:relative">
        <div style="position:absolute; left:100px; top:100px">
          ..
        </div>
      </div>
    </td>
  </tr>
</table>