[css] div정렬 및 겹치기 position:absolute ,position:relative

position의 속성으로 absolute와 relative가 있다.

이들은 주로 div로 프레임을 짤때 배치를 선택하는데 사용된다.

absolute는 절대 위치를 표현하므로 브라우저의 좌측 상단을 기준으로 개체가 놓이게 한다.

relative는 상대 위치를 표현하므로 특정 개체를 기준으로 위치가 잡힌다.

예제로 비교해 보면 쉽다.

absolute소스확인

<table border="1" bordercolor="green" width="600" height="300">
<tr>
 <!-- 정렬 기준으로 div위치가 시작한다 -->
 <td align="center">
  <!-- position:absolute 인 상태로 위치를 지정하지 않으면 아래 div 정렬을 따른다. -->
  <div style="BACKGROUND: black; position:absolute; text-align:center; width:500px; height:80px; z-index:90;">
  </div>
  <!-- position:absolute 인 경우 td정렬 기준으로 div 왼쪽 끝을 적용한다. -->
  <div style="BACKGROUND: red; position:absolute; width:400px; height:100px;text-align:center; z-index:100;">
  </div>
  
 </td>
</tr>
</table>

 

relative 소스확인

<table border="1" bordercolor="green" width="600" height="300">
 <tr>
  <!-- 정렬 기준으로 div위치가 시작한다 -->
  <td align="center">
   <!-- position:absolute 인 상태로 위치를 지정하지 않으면 아래 div 정렬을 따른다. -->
   <div style="BACKGROUND: black; position:absolute; text-align:center; width:500px; height:80px; z-index:90;">
   </div>
   <!-- position:relative 인 경우 td정렬 기준으로 div 전반부를 적용한다. -->
   <div style="BACKGROUND: red; position:relative; width:400px; height:150px;text-align:center; z-index:30;">
   </div>
   
  </td>
 </tr>
 </table>

정리해보면 absolute는 특정 개체와 관계없이 겹쳐서라도 배치가 되는 수준이며

relative는 각 개체를 기준으로 상대적 위치에 배치되므로 겹치지 않는다.