웹마스터 팁

레이어 속에 또다른 레이어 넣기

익스플로러에서는 <DIV> 태그를 중첩해서 사용하면 레이어 속에 또다른 레이어를 계속 넣을 수 있습니다
이때 하위 레이어의 위치 속성은 상위 레이어를 기준으로 한 위치가 됩니다
즉 아래와 같은 형식에 됩니다

<DIV>최상위 레이어
    <DIV>그다음 레이어
        <DIV>세 번째 레이어
            <DIV> 네 번째 레이어
            </DIV> 
        </DIV> 
    </DIV> 
</DIV>  

 아래 예제를 보세요

<style type="text/css">
#layer1{                
        width:400; height:200;
        position:absolute;
        left:100; top:100;              
        background-color:red;
        }
#layer2{
        width:200; height:100;
        position:absolute;
        left:100; top:100;      /*** 이 위치는 상위 레이어(layer)를 기준으로 한 위치입니다 ***/
        background-color:yellow;
}
</style>

 

<div id=layer1>
layer 1
         <div id=layer2>
         layer 2
        </div>
</div>

예제실행

예제적용사이트 : http://www.itbank.kr