Position sticky와 z-index 사용하기

 

position의 가장 복잡한 속성 sticky와 z-index에 대해 알아보겠습니다.

 

position과 position의 다른 속성들

 css 속성 중 하나인 position의 다양한 타입들은 디자인적 명령을 수행하기에 최적화되어있습니다. 단순히 블록을 쌓듯 웹사이트를 만든다면 기능상에 큰 문제 없이 운영은 가능합니다. 그러나 인터넷 이용자가 늘어나고 기능이 발전되면서 우리가 이용하는 웹사이트들은 더욱 독특한 시도를 하고 심미적으로 만족스럽게 변화하고자 하는 경향을 가지게 되었습니다. position은 기존에 블록처럼 쌓여있는 웹 화면의 구성 요소들을 유동적으로 움직여 다양한 커스텀이나 시각적 변화를 가져올 수 있도록 합니다.

 

 position에는 오늘 다룰 sticky를 제외하고도 static, relative, absolute, fixed라는 보다 자주, 다양하게 사용 되는 타입들이 있습니다. 이러한 다른 타입들에 대한 정보와 예시는 이전 게시글 'position의 다양한 속성 알아보기'에 정리해 두었으니 참고 부탁드립니다^^

 

https://salt-planet.com/entry/css-position%EC%9D%98-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%86%8D%EC%84%B1-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

[css] position의 다양한 속성 알아보기

 

 

position: sticky

 position 타입 중 하나인 sticky는 가장 사용이 까다로운 성격을 가지고 있습니다. sticky는 이름처럼 지정된 영역에서 스크롤을 내려도 달라 붙어있는듯 위치를 유지합니다. 그러나 스크롤이 지정된 위치를 벗어나게 되면 position: static이었던 것처럼 특정 위치에 붙어있는 상태를 끝내게 됩니다. 텍스트로 설명하기에는 조금 복잡하기 때문에 바로 아래 예시를 첨부하겠습니다. 

 

See the Pen position sticky by solip000 (@solip000) on CodePen.

 

 위 예시를 보면 sticky 가 적용된 하늘색 박스는 지정된 위치에 스크롤이 도달할 때까지 보이지 않고, 지정된 위치를 넘어서면 더 이상 따라오지 않습니다. 즉, 정해진 위치에서만 positon fixed 같은 모습을 보여주는 특이한 성격을 가지고 있습니다. 이때 sticky가 작동하는 '지정된 위치'는 sticky를 감싸고 있는 부모 태그를 뜻합니다.

 

 위와 같이 sticky는 복잡한 성격을 가지고 있기 때문에 사용하기 위한 몇 가지 필수 조건을 가집니다. 

 

 첫 번째는 sticky가 움직이는 영역이 되어주는 부모 태그가 확실한 height 값을 가지고 있어야 한다는 것입니다. 높이 값을 적용하지 않거나 height: 100%를 입력하였을 때 sticky는 기능을 가지지 못합니다. 

 

 두 번째는 조상 태그 중에 overflow: hidden이 있으면 작동하지 않습니다. 이는 바로 인접한 부모 태그뿐만이 아니라 모든 조상 태그에 해당되는 조건입니다.

 

 현업에서 웹사이트 페이지를 퍼블리싱 하다 보면 부모 태그의 높이 값을 지정했는데도 sticky가 기능하지 않거나 잘 작동하던 기능이 고장 나는 경우가 생깁니다. 이는 웹사이트 하나를 퍼블리싱 할 때 긴 기간에 걸쳐 작업하거나 다수가 함께 코딩하는 일이 종종 있기 때문에 뜯어보게 된다면 대체로 과거의 나 또는 다른 사람이 overflow가 원인인 경우가 많습니다. 

z-index

z-index는 어떤 요소가 앞에 있는지, 뒤에 있는지를 지정하는 값입니다. z-index는 position 속성과 함께 사용되는 요소로, position이 적용되지 않은 태그에 z-index를 사용하는 것은 효과를 가지지 못합니다.

 

z-index는 position을 속성을 사용하는 태그에는 직접 적용하지 않아도 자동으로 적용됩니다. 기본적으로는 html 문서상 아래에 적인 태그일수록 자동으로 위로 올라오록 지정됩니다. z-index의 값을 적는 것은 작성자가 임의로 어느 것을 가장 위로 올릴지 지정할 수 있도록 합니다.

 

See the Pen z-index 설정 없을 때 예시 by solip000 (@solip000) on CodePen.

 

위 예시는 z-index 값을 직접 지정하지 않은 상태입니다. 자동으로 1번 박스가 2번 박스 아래로 덮이고, 세 번째 박스가 가장 위로 올라와 1, 2번 박스를 가리고 있는 것을 확인할 수 있습니다.

 

See the Pen z-index 예시 by solip000 (@solip000) on CodePen.

 

각각 첫 번째 박스에는 3, 두 번째 박스에는 1, 세 번째 박스에는 2의 z-index를 적용하였습니다. 보이는 바와 같이 적용된 z-index의 숫자가 클수록 위로 올라오고 작을수록 아래로 묻히는 것을 확인할 수 있습니다.

 

오늘은 position의 타입 중 하나인 sticky와  position과 함께 쓰이는 z-index에 대해서 알아보았습니다. 다은에 또 다른 코딩 정보로 돌아오겠습니다~! 오늘도 좋은 하루 보내세요^^*