CSS z-index

z-index 속성은 position 속성을 가진 요소에 z 축을 정의 합니다.

 

z-index:value

 

 

기본값:auto, 상속:안됨, 버전:CSS2

 

요소끼리 겹칠 경우 어느 요소가 맨 앞으로 위치할 것인지 결정하여 z-index 값을 주며 수치가 높을수록 상위에 놓이게 됩니다. 티스토리 티에디션의 경우 z-index값이 10으로 설정 되어 있으므로 티에디션 보다 앞으로 사기 위해선 z-index 값을 11이상으로 정의해 주면 됩니다. 값은 px 또는 %가 아닌 단지 숫자입니다.

 

CSS position

z-index 0

z-index 1

z-index 2

z-index 3

 

 

 

 

 

 

 

 

<div style="position:absolute">
<div style="width:100px;height:100px;position:absolute;background-color:yellow;top:20px;left:20px;z-index:0;opacity:0.5;border:1px solid #333333;">z-index 0</div>
<div style="width:100px;height:100px;position:absolute;background-color:yellow;top:40px;left:40px;z-index:1;opacity:0.5;border:1px solid #333333;">z-index 1</div> 	
<div style="width:100px;height:100px;position:absolute;background-color:yellow;top:60px;left:60px;z-index:2;opacity:0.5;border:1px solid #333333;">z-index 2</div> 	
<div style="width:100px;height:100px;position:absolute;background-color:yellow;top:80px;left:80px;z-index:3;opacity:0.5;border:1px solid #333333;">z-index 3</div> 
</div>