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

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

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012