MDN(Mozilla Developer Network) 개발 네트워크의 문서를 참고하였음.
CSS를 공부하다 보면 '이런 디자인은 이렇게 하면 된다'는 답은 많지만 어떤 원리로 그렇게 화면에 표현되는지 설명되어 있지 않은 경우가 많았다.
z-index의 원리를 공부하며 레이어의 쌓임 맥락(stacking context)에 대해 정리해보았다.
잘못된 내용이 있다면 댓글 부탁드립니다. 🙋♀️
z-index가 사용되지 않은 환경
z-index가 사용되지 않은 환경에서 position의 순서는 다음과 같다. (from bottom to top)
- 루트요소의 배경, 테두리
- 루트요소 : HTML문서 전체의 콘텐츠를 감싸는 <html>~</html>요소를 의미
- position이 미지정된(==static) 요소들이 html 구조에 등장한 순서대로 쌓임
- position이 미지정된 요소는 z-index가 무엇이든 영향받지 않는다.
- html의 stacking context를 따르게 되므로, 자식요소도(등장순서대로) 해당 요소의 앞에 위치하게 된다.
- position이 지정된 요소들이 html 구조에 등장한 순서대로 쌓임
Box1의 z-index:30; 이 Box2의 z-index:10; 보다 높기 때문에 Box1이 맨 위에 위치한다고 생각하기 쉽지만, z-index는 positioned 요소에서만 적용되는 속성이므로 아래의 요소는 HTML에서 등장하는 순서대로 쌓이게 된다.
See the Pen z-index_prac#1 by yuran (@rubberduck12345) on CodePen.
For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, then it is painted on the same layer, within its parent stacking context, as positioned elements with stack level 0.
See the Pen without z-index by yuran (@rubberduck12345) on CodePen.
div-5번 등장 순서가 가장 마지막이더라도 position이 선언되지 않은 기본값은 static 이므로 position이 static이 아닌 요소 보다 아래에 위치(위의 2순위 해당)한다.
이는 z-index를 사용해 쌓임순서를 가장 위로 배치하여도 position이 static인 경우 가장 아래에 놓이는 이유이다. 이러한 맥락에서 position 속성이 static이 아닐 때만 z-index는 유효하다.
※ 예시의 DIV-5가 opacity : 1; 인 이유는 opacity < 1 이면 독립적인 쌓음맥락(stacking context)을 생성하기 때문에 레이어가 가장 위로 올라오기 때문이다. 이 경우 설명하고자 했던 static의 특성을 표현할 수 없으므로 opacity를 수정하였다.
z-index가 사용되는 환경
수직, 수평 외에도 z-축의 정수값으로 레이어의 쌓임 순서를 결정할 수 있다. 큰 정수일 수록 화면을 보는 사용자에게 가까운 것을 의미한다. 동일한 z-index 값을 가지는 요소는 'z-index가 사용되지 않는 환경'의 우선순위를 따른다.
- 참고 : painting-order ( 링크 )
The bottom of the stack is the furthest from the user, the top of the stack is the nearest to the user:
| | | |
| | | | ⇦ ☻
| | | user
z-index: canvas -1 0 1 2
아래와 같이 요소가 있을 때
- 루트요소(<html>)
- DIV #1 (z-index :3)
- DIV #2 (z-index :5)
- DIV #3 (z-index :2)
- DIV #4 (z-index :6)
- DIV #5 (z-index :10)
- DIV #6 (z-index :9)
실질적인 순서는 아래와 같다. 자식 요소의 z-index 값은 부모 요소에게만 의미가 있다.
- 루트요소(<html>)
- DIV #1 (z-index :3)
- DIV #2 (z-index :5)
- DIV #3 (z-index :5.1)
- DIV #4 (z-index :5.2)
- DIV #5 (z-index :5.3)
- DIV #6 (z-index :9)
See the Pen z-index by yuran (@rubberduck12345) on CodePen.
'웹개발' 카테고리의 다른 글
| click 이벤트 함수 - 이벤트 버블링 해결 방법, stopPropagation (0) | 2023.01.11 |
|---|---|
| transform 속성 translate, scale, rotate 변환 함수 예시 (0) | 2022.12.05 |
| 딤드(deemed) 레이어 팝업에 어두운 배경 적용하기 (0) | 2022.11.23 |
| details와 summary 태그로 아코디언 만들기 (0) | 2022.11.21 |
| [메모] React 리액트 (1) | 2022.11.07 |
