z-index 속성은 다른 요소와 겹치게 될 때 요소의 순서를 지정하기 위해 사용됩니다.
요소들의 우선순위를 z-index가 정하고 숫자가 커질수록 렌더링 순서가 느려지므로 더 앞에 위치됩니다.
특정 요소의 렌더링 순서는 stacking context(쌓임맥락)을 생성하면서 자신의 z-index 값에 영향을 받게 됩니다.
그래서 z-index를 알기 위해선 먼저 stacking context(쌓임맥락)을 이해해야 합니다.
쌓임 맥락이란, HTML 요소들에 사용자가 바라보는 기준으로 가상의 z축을 생성하여 3차원 개념으로 보는 것
간단히 말해서, stacking context는 공통 부모가 있는 페이지의 "요소 그룹"입니다.
부모는 stacking context의 루트이며, 요소는 해당 요소 내부의 스택 순서로 배치됩니다.
예를 들어서 루트 요소( <html> )은 페이지의 모든 요소와 기타 stacking context를 포함하는 "전역" stacking context입니다.
=> 웹 페이지와 그 안의 모든 요소에는 좌표 시스템이 있습니다. 그 시스템에 요소가 스택되는 3차원 z축이 포함됩니다.
z축 상에서 z-index에 따라 각 요소들이 "쌓이게" 된다.
이러한 쌓임맥락을 형성하는 조건들
- position이 relative/absolute이면서 z-index가 auto가 아닌 요소
- position이 fixed/sticky인 요소
- opacity가 1보다 작은 요소
- transform이 none이 아닌 요소
위 4가지는 가장 많이 쓰이는 속성들이니 따로 기억해두시는 게 좋을 것 같습니다!!
쌓임맥락의 특징들
- 한 쌓임맥락이 다른 쌓임맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다
- 쌓임맥락에서 쌓임을 고려하는 것은 오직 자식요소들에 대해서 만이다.
- 각 쌓임맥락은 독립적입니다. 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째로 부모 쌓임맥락 안으로 배치합니다
일반적으로 브라우저는 DOM 트리에서 먼저 오는 요소가 먼저 배치되고 뒤에 오는 요소가 이전 요소 위에 배치되게 됩니다. (페이지가 자연스럽게 흐른다면.)
z-index가 없는 경우에는 모든 요소들의 z-index 값이 none이 되게 됩니다.
간단하게 stacking order는 기본적으로 html의 노출 순서와 같다고 볼 수 있습니다.
그리고 그중에서 포지션이 사용된 요소는 그렇지 않은 요소보다 앞에서 노출되게 됩니다.
z-index를 사용하는 순간은?
예를 들어, 어떤 지점에서 겹치는 절대 위치에 있는 두 요소가 있고 그중 하나가 소스코드상에서 앞에서 작성되어도 다른 하나 앞에 표시되도록 한다면 z-index 속성을 사용하면 됩니다. 즉, z축에서 렌더링되는 순서를 변경하려는 경우!
하지만,
여기서 가장 중요한 사항은 z-index는 position이 지정된 요소에서만 작동한다는 것입니다!
그래서 z-index에 따라서 요소에 값을 지정하여 다른 요소의 앞에 가져 오더라도 position이 되어있지 않는 한, 요소에 영향을 주지 않습니다.
설정된 z-index에 따라서, 해당 요소가 속한 쌓임 맥락에서 순서를 먼저 지정하고 위에서 언급한 단계에 따라서 화면에 렌더링하게 됩니다.
참고: https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/css/z-index.md
GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들
:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
예제
각 쌓임맥락은 독립적이며, 부모 안의 자식 요소들은 부모 안에서만 쌓임이 고려된다
이 쌓임맥락의 계층구조
- 루트
- DIV #1 - 렌더링순서: 5
- DIV #2 - 렌더링순서: 2
- DIV #3 - 렌더링순서: 4
- DIV #4 - 렌더링순서: 4.6
- DIV #5 - 렌더링순서: 4.1
- DIV #6 - 렌더링순서: 4.3
<div id="div1">
z-index: 5
</div>
<div id="div2">
z-index: 2
</div>
<div id="div3">
z-index: 4
<div id="div4">
z-index: 6
</div>
<div id="div5">
z-index: 1
</div>
<div id="div6">
z-index: 3
</div>
</div>그래서 만약 z-index를 부여했는데도 동작하지 않다면 그 요소의 z-index 수준을 제한하는 부모요소가 있는지 먼저 확인해 봐야 합니다. 그것이 z-index의 동작을 제지하는 요인 중 하나일 것입니다.
출처:
https://tympanus.net/codrops/css_reference/z-index/
z-index - Codrops
The z-index property is used to specify the z-order of an element when it overlaps other elements. That is, it specifies whether the element is shown on top of other elements that it overlaps, or behind (or under) them. The z-order is the order of the elem
tympanus.net
https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/css/z-index.md
GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들
:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.
github.com
z-index가 없는 경우의 쌓임 - CSS: Cascading Style Sheets | MDN
« CSS « CSS z-index 이해하기
developer.mozilla.org
https://dongmin-jang.medium.com/css-stacking-context-172f9bd1af8b
[CSS] Stacking context
Z-Index에 대해서 아무도 알려주지 않은 것
dongmin-jang.medium.com
쌓임 맥락 - CSS: Cascading Style Sheets | MDN
쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다.
developer.mozilla.org
z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)
이 글은 https://coder-coder.com/z-index-isnt-working/의 번역글입니다. 오타 및 오역 제보 기쁘게 받도록 하겠습니다.
erwinousy.medium.com
'엘리스 ai 트랙 > FE' 카테고리의 다른 글
| var vs let vs const (0) | 2022.02.21 |
|---|---|
| 스코프 (0) | 2022.02.14 |
| BFC (Block Formatting Context) (0) | 2022.02.05 |
| 표준모드(standards mode)와 호환모드(quirks mode) (0) | 2022.01.23 |
| 사용할 링크 모음! (0) | 2022.01.23 |