개요
- westgram 클론코딩을 진행하는 도중 position에 대해서 많이 애를 먹은 부분이 있어 정리하고자 한다.
position이 작동하지 않는 경우
프로젝트를 진행하면서 고생을 했던 부분은 사이드바와 스켈레톤 이미지를 추가하는 부분이었다. 사이드바는 네비게이션 바와 같이 feed의 오른쪽에 고정되어 있어 스크롤을 하더라도 같은 위치에 있어야 한다.
main태그에 대해 position: relative를 부여하고 사이드바에 해당하는 .sidebar에 position: fixed를 주었지만 사이드바는 main이 아닌 뷰포트 전체에 대해 position이 fixed된 것처럼 행동 하였다.
구글링 결과 main, 즉 position의 기준점이 될 요소에 transform을 사용했기 때문이다.
transform이라는 속성 자체가 해당 element에 대해 새로운 좌표계 시스템을 만드는 것이기 때문에 자식 요소의 position의 기준점이 될 수 없다는 것이다.
결과적으로 main이 기준점의 성질을 상실했으므로 사이드바는 main보다 위에 position이 적용된 (프로젝트에서는 없었기에) body태그를 기준점으로 잡은 것이다.
z-index도 안된다??
- 비슷한 사항이 z-index에도 있었다. westagram의 모든 이미지에 대해 시작 2초 정도 이미지를 덮는 회색 영역을 설정하고 풀리도록 애니메이션을 pseudo element을 이용하여 스타일링 하였다.
- 대부분의 이미지에 대해서 잘 작동하였으나 스토리 부분에서 이를 적용할 때 문제가 발생하였는데 z-index가 더 낮은(90) 스크롤 버튼이 z-index가 가장 큰(999) pseudo element보다 앞서 나온 것이다.
- z-index도 position이 적용된 요소에 대해 기존의 쌓임 순서를 무시하고 먼저 쌓임 순서를 적용하는 속성이다.
- position이 설정된 요소, 즉 기준점이 필요하고 이 또한 오류를 찾아본 결과 pseudo element의 원래 element에 transform속성이 적용되어 있기 때문이었다.
transform을 사용한 element에 대해서는 z-index: 0처럼 동작하는 새로운 stacking context가 생겨난다 (심지어 이는 해당 element에 position이 적용되지 않더라도 발생할 수 있다!)
쌓임 순서 정리
- 쌓임 맥락 (stacking context)란 가상의 z축을 사용한 HTML요소의 3차원 개념화로 요소는 자신의 속성에 따른 우선순위에 따라 3차원 공간을 차지한다
- 여기서는 안되는 케이스에 대해 체크해야할 리스틀르 추가하는 방식으로 작성한다.
1) 만약 z-index가 같은 요소들이 존재한다면 (즉, 같은 stacking context에 존재한다면) HTML의 구조상 나중에 작성된 element가 위로 쌓인다.
2) pseudo element를 사용하는 경우 기존요소 또는 가상 요소에 z-index 및 transform, opacity등이 설정되어 있는지 체크한다.
- 특히 before, after는 각각 요소의 첫번째, 마지막으로 새로운 요소가 생기는 것이므로 순서에 유의할 것!
- opacity, transform등은 새로운 stacking context를 생성
3) 해당 element에 대해 부모요소가 z-index를 가진다면 자식요소의 stacking context는 부모 요소의 stackgin context에 국한된다는 것이다.
<!-- HTML -->
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
<!-- CSS -->
.content { z-index : 1; background-color: gray;}
.modal { z-index : 100;}
.side-tab{ z-index : 5;} - 위의 예시에서는 content에 modal이 띄워지는 경우 background-color: gray가 적용되고 z-index: 100인 modal보다 앞서 나타난다는 것이다.
- modal의 경우 부모 element인 content에 국한되기에 z-index: 1을 가진 것처럼 행동한다. (부모로 부터 상속받은 것처럼!)
자식 element의 z-index는 부모 element의 틀을 벗어날 수 없고 국한된다!
참고 자료
