• Q&A
  • 회원가입
  • 로그인

[position] CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-index속성 = 제트인덱스 = 지인덱스, 상속 X)


z-index 정의
 
요소끼리 겹칠 때 상하 지정.
즉,
몇 개의 요소가 position 속성에 의해 위치 겹칠 때,
어떤 요소를 위에 위치시킬건지 정하는 레이어 속성.

 


 
1. 
position 속성과 함께 사용.

2. 
기본값 : auto
상속여부 : X
애니효과 : O
CSS버전 : CSS2
JS 구문 : object.style.zIndex="-1"
 
3.
한 요소 안의 계층적 요소간에는 작동 안 함. 
(멘 아래 예제 참고)
 
4.
모든 브라우저 지원.
 
 
z-index 구문
 
선택자 {z-index:속성값;}
 

[속성값]
 
auto
문서 흐름에 따른 기본 위치에 위치 (기본값)
 
숫자
숫자 클수록 겹쳤을 때 위에 위치함 (층 수 의미), 
음수 가능. 이 경우 다른 요소들보다 밑면에 위치.
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소 속성을 상속

 
z-index 예제1
 
<style>
#layer1 {
     background-color:red;
     width:200px; height:200px;
     position:absolute;
     top:106px;
     left:209px;
     z-index:1;
}
</style>
 
<div id="layer1">홈짱닷컴 (homzzang.com)</div>
 
 
z-index 예제2 - 인라인 방식
 
 
<style>
div {
  width:200px; 
  height:200px; 
  position:absolute;   
}
#layer1 {
  background-color:red; 
  left:209px; 
  top:106px; 
  z-index:1;
}
#layer2 {
  background-color:blue; 
  left:265px; 
  top:142px; 
  z-index:2;
}
#layer3 {
  background-color:magenta; 
  left:322px; 
  top:197px; 
  z-index:4;
}
#layer4 {
  background-color:yellow; 
  left:379px; 
  top:247px; 
  z-index:3;
}
</style>
 
<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>
<div id="layer4"></div>
 
z-index 예제3
 
 
<style>
div {
  width:200px; 
  height:200px; 
  position:absolute;   
}
#layer1 {
  background-color:red; 
  left:209px; 
  top:106px; 
  z-index:1;
}
#layer2 {
  background-color:blue; 
  left:265px; 
  top:142px; 
  z-index:2;
}
#layer3 {
  background-color:magenta; 
  left:322px; 
  top:197px; 
  z-index:4;
}
#layer4 {
  background-color:yellow; 
  left:379px; 
  top:247px; 
  z-index:3;
}
</style>
 
<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>
<div id="layer4"></div>
 

 

z-index 예제4 - 부모자식 계층적 요소간엔 작동 안 함.


<style>

div {width:100px; height:100px; position:absolute;}

.hz {background:white; top:100px; left:100px; }

.a {background:red; top:0px; left:0px; z-index:3}

.b {background:blue; top:30px; left:30px; z-index:2}

.c {background:green; top:30px; left:30px; z-index:1}

</style>

<div class="hz">
    <div class="a">a
         <div class="b">b
              <div class="c">c</div>
         </div>
    </div
</div>

결과 보기

※ 자식요소가 부모요소 위에 배치 됨.

오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012