z-index란?
z-index는 웹을 x축, y축뿐만 아니라 z축도 가진 3차원 입체로 바라보아 HTML요소를 3차원으로 개념화한 것이다.
- z: 3차원적인 두께
- 요소들 간에 누가 사용자 평면상 위로 올라가는지를 결정함
- 숫자가 클수록 위로 올라오고, 숫자가 작을수록 아래로 내려간다.
- z-index가 동일하면 코드 상 나중에 입력한 것이 위로 올라온다.
[z-index를 적용하기 전]
코드 상 나중에 입력한 순서인 z-4 > z-3 > z-2 > z-1 순으로 위에 올라온다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.
[z-index를 적용한 뒤]
z-index 숫자가 큰 순서인 z-1 > z-2 > z-3 > z-4 순으로 위에 올라온다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.