[DOM_Style] JS - zIndex 속성 - 요소간 중첩 시, 상하 지정/설정 (=zIndex속성 = 제트인덱스 속성 = 지인덱스 속성)

목차

1. zIndex 예제 - 요소간 중첩 시 상하 지정
2. zIndex 정의
3. zIndex 구문

zIndex 예제 - 요소간 중첩 시 상하 지정

 

<style>

#hz {

  position: absolute;

  left: 0px;

  top: 0px;

  z-index: -1

}

</style>

<img id="hz" src="https://i.imgur.com/PQNhCln.gif">

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").style.zIndex = "1";

}

</script>

 

결과보기

zIndex 정의

 

요소 간 중첩 시, 상하 지정.

 

---

 

1.

숫자 큰 게 위에 위치

 

2.

position 속성값이 relative, absolute, fixed 일 때 사용 가능.

 

3.

기본값: auto

반환값: 요소의 수직중첩 상 순서 위치를 나타내는 문자열

CSS속성: z-index
CSS버전: CSS2

4.
모든 브라우저 지원.

 

zIndex 구문

 

[접근]

object.style.zIndex

 

[설정]

object.style.zIndex = "auto|number|initial|inherit"

 

---

[속성값]

 

auto

문서 순서에 따라 요소 위아래 순서 결정. (기본값)

 

number

요소 위아래순서 정의 정수. 음수값 허용

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소 속성값 상속.