바삭한달고나 지식창고
article thumbnail
stacking context와 z-index 정렬 순서 이해하기
웹개발 2022. 11. 2. 11:10

MDN(Mozilla Developer Network) 개발 네트워크의 문서를 참고하였음. CSS를 공부하다 보면 '이런 디자인은 이렇게 하면 된다'는 답은 많지만 어떤 원리로 그렇게 화면에 표현되는지 설명되어 있지 않은 경우가 많았다. z-index의 원리를 공부하며 레이어의 쌓임 맥락(stacking context)에 대해 정리해보았다. 잘못된 내용이 있다면 댓글 부탁드립니다. 🙋‍♀️ z-index가 사용되지 않은 환경 z-index가 사용되지 않은 환경에서 position의 순서는 다음과 같다. (from bottom to top) 루트요소의 배경, 테두리 루트요소 : HTML문서 전체의 콘텐츠를 감싸는 ~요소를 의미 position이 미지정된(==static) 요소들이 html 구조에 등장한 순..