-
Z-IndexWeb Programming 2022. 8. 24. 14:55반응형
z-index를 남용할 경우 발생하는 문제점
- 이미 존재하는 컴포넌트를 사용할 때 해당 컴포넌트 구조에 따라 원치 않는 정렬이 발생할 수 있다.
화면의 z축 순서를 정하는 규칙은 크게 4가지를 기준으로 정해진다.
- 해당 컴포넌트의 Z-index 값 (내림차순)
- 해당 컴포넌트의 Position 여부 (Unpositioned < Positioned)
- 해당 컴포넌트의 Parent의 순서
- 해당 컴포넌트의 Mark Up 순서 (상단에서 하단으로)
💡 순서 : Postion 여부 > Parent의 순서 > Z-index > Mark Up 순서
z-index only works with positioned elements
반응형'Web Programming' 카테고리의 다른 글
Git Versioning 및 CHANGELOG.md 생성 자동화 (0) 2023.01.30 Promise 객체 병렬처리 (0) 2022.09.29 Multi-Tenancy의 개념 (0) 2022.06.27 재고 - 주문 프로세스에서의 동시성 제어 (0) 2022.01.26 검색엔진 최적화(SEO) (0) 2021.09.29