div position:relative ...?

http://ktours.cyworld.com 를 다시 재정비(?)하기위해
div 에 관한 가장 base 를 건드려볼까...싶어서 소스 하나를 만들어봤다.

...

<div style="width:100px; height:100px; overflow:hidden; background-color:gray;">
<div style="position:relative; left:20px; top:20px;">
<div style="width:30px; height:30px; overflow:hidden; background-color:blue;">
  <div style="position:relative; left:-10px; top:-10px;">
  <div style="width:30px; height:30px; overflow:hidden; background-color:green;">
  </div></div>
</div></div>

<div style="position:relative; left:0px; top:-30px;">
<div style="width:30px; height:30px; overflow:hidden; background-color:yellow;">
  <div style="position:relative; left:-15px; top:-15px;">
  <div style="width:35px; height:35px; overflow:hidden; background-color:red;">
  </div></div>
</div></div>

<div style="width:10px; height:10px; overflow:hidden; background-color:cyan;">
</div>

</div>

<div style="width:150px; height:150px; overflow:hidden; background-color:gray;">

<div style="position:relative; left:40px; top:40px;">
<div style="width:60px; height:60px; overflow:hidden; background-color:blue;">
  <div style="position:relative; left:-20px; top:-20px;">
  <div style="width:60px; height:60px; overflow:hidden; background-color:green;">
  </div></div>
</div></div>

<div style="position:relative; left:0px; top:-60px;">
<div style="width:60px; height:60px; overflow:hidden; background-color:yellow;">
  <div style="position:relative; left:-30px; top:-30px;">
  <div style="width:70px; height:70px; overflow:hidden; background-color:red;">
  </div></div>
</div></div>

<div style="width:20px; height:20px; overflow:hidden; background-color:blue;">
<div style="width:10px; height:10px; overflow:hidden; background-color:cyan;">
</div>
</div>

</div>

...

...

맨 처음에 testing 할 때는 별 생각 없이 처리했는데,
하다보니, 뭐랄까... relative 가 영향받는 범위는 전에 있던 div 의 크기만큼 아래로 떨어진 형태...라고할까...

div 내부에서 측정된 최대크기가 아닌, div 가 표현된 최대크기라는 부분이 보였다.
60px 안에 70 px을 적용해봤지만, 밖에서는 영향받지 않은 형태로 판단...

div 내부의 div 역시 큰 무리없이 작동하는 걸 보니 다행이다는 생각이 들면서도...

...

그건 그렇고...
=.=... 역시 웹편집상태( contentEditable=true )에서 보면 참(?) 애매하게 나온다...

... ('10.05.06 추가)

음... Window7 IE8 에서 테스트해보니, 뭔가 다르다... 에디터에서 편집하던 모양처럼 다르다고 해야할까...
relative 로 적용해서 overflow 안에 적용을 시켜도 밖으로 튀는 현상이 보였다.

= =;... 일단 기록을 해두고...

NowMark killofki@.