z-index와 position

https://dydals5678.tistory.com/42

CSS - 문서의 보이는 순서 (Z-INDEX , POSITION)

 

나는 html의 요소의 쌓이는 순서가, 요소가 위차하는 순서나 z-index로만 결정되는 줄 알았는데, 최근에야 position도 쌓임 순서에 영향을 미친다는 것을 깨달았다.

 

예를 들어서 position 값이 있는것과 없는것이 있다면, 없는 것이 뒤쪽에 배치가 된다.

 

즉, 같은 형제레벨에서 position값이 없고 z-index가 상대적으로 높고, 다른 z-index가 낮은 형제요소들이 position값을 가지고 있다고 가정하면,

z-index가 아무리 높다한들 position이 없으므로 가장 뒤쪽에 배치된다.

 

z-index를 사용하면 계층관계와 psotion이 존재하는지 여부까지 신경쓰도록 하자.