• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. z-index 정의
  2. z-index 구문
  3. z-index 예제1 - 요소가 1개일 땐 무의미
  4. z-index 예제2 - 4번째가 가장 위에 위치
  5. z-index 예제3 - 3번째가 가장 위에 위치
  6. z-index 예제4 - 부모자식 계층적 요소간엔 작동 X

 

z-index 정의 

 
요소끼리 겹칠 때 상하 지정. (= 요소간 상대적 층간 위치 지정.)
즉,
몇 개의 요소가 position 속성에 의해 위치 겹칠 때,
z-index 숫자가 더 높은 요소가 더 앞쪽에 노출 됨.

 


 
1. 
position 속성과 함께 사용. ★★★★★
즉, 아래 경우에 적용됨.
  • position: absolute; 
  • position: relative;
  • position: fixed; 
  • position: sticky;
  • flex items (= display:flex 요소의 직접 자식요소들)
단, 한 요소 안 계층적 요소간엔 작동 X. (예제4) 
 
2.
z-index 값 없이 2개의 position 된 요소가 서로 겹칠 시,
HTML 코드 순서 마지막에 위치한 요소가 더 앞에 배치됨.

3. 
  • 기본값: auto
  • 상속여부: X
  • 애니효과: O
  • CSS버전: CSS2
  • JS구문 : object.style.zIndex="-1"
 
4.
모든 브라우저 지원.
 
5. MDN z-index 예제보기
 
 

z-index 구문

 
selector {z-index: auto|number|initial|inherit;}
 

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

 

z-index 예제1 - 요소가 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 - 4번째가 가장 위에 위치

 
 
<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:3;
}
#layer4 {
  background-color:yellow; 
  left:379px; 
  top:247px; 
  z-index:4;
}
</style>
 
<div id="layer1"></div>
<div id="layer2"></div>
<div id="layer3"></div>
<div id="layer4"></div>
 

z-index 예제3 - 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 - 부모자식 계층적 요소간엔 작동 X


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

결과 보기

※ 주의: a요소의 z-index 값이 가장 크지만, 자식요소가 부모요소 위에 배치 됨.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
position CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로 = float속…
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
position CSS - overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정 (= overflow-x속성…
position CSS - overflow-y 속성 - 수직방향으로 넘치는 내용 처리 방법 지정 (= overflow-y속성…
목록
찾아주셔서 감사합니다. Since 2012