div정렬 및 겹치기 position:absolute ,position: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:absolute 인 경우 td정렬 기준으로 div 왼쪽 끝을 적용한다. -->
  <div style="BACKGROUND: red; position:absolute; width:400px; height:100px;text-align:center; z-index:100;">
  </div>
  
 </td>
</tr>
</table>

<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>