[팀] 겸상 - CSS의 z-index로 HTML요소에 우선순위 부여하여 sticky 적용한 요소를 화면 전면에 위치시키기

포토샵에서 레이어의 위치를 조정하듯 원하는 HTML 요소를 화면에서 가장 위쪽에 보이도록 할 필요가 있었다. [그림 1]의 "함께할 숟갈"에 sticky를 적용하여 스크롤을 내리면 화면 최상단에 고정되게 하였다.

[그림 1] "함께할 숟갈"에 sticky를 주었다.

 

그런데 "함께할 숟갈"이 화면의 전면에 위치하지 않고 뒤로 숨어버리는 문제가 발생하였다.

[그림 2] sticky가 적용된 "함께할 숟갈"이 화면의 뒤로 숨어 버렸다.

 

원했던 결과는 "함께할 숟갈"이 [그림 3]과 같이 화면의 가장 앞쪽에 표시되도록 하는 것이었다. 이때 z-index를 이용하여 HTML 요소에 우선순위를 지정하면 간단히 해결할 수 있었다.   

[그림 3] z-index를 "함께할 숟갈" 태그에 주었다.