position sticky 특징

position : fixed 의 경우 view port 에 고정되지만 sticky 의 경우 scroll box에 고정되는 특징이 존재한다.

쉽게말해 sticky 속성을 적용한 div 박스의 offset top 값이 0이 될 경우 top에 고정되는 속성이 있다.

<style>

.positionStickyBox{ position:sticky; top:0} /* sticky 값은 top값을 주어야 작동한다 */

.positionRelativeBox{ position:relative }

</style>

<div class="positionStickyBox"></div>

<div class="positionRelativeBox"></div>

위와 같은 level 에 sticky 와 relative 값을 준 두가지 박스가 존재 할 때

스크롤을 했을 때 sticky 속성을 적용한 box가 relative 속성을 적용한 박스 뒤에 가려지는 상황이 존재한다.

이때 아래와 같이 sticky 값을 준 box 에 relative 보다 z-index 값을 높에 적용하면 가려지지 않게 된다.

<style>

.positionStickyBox{ position:sticky; top:0; z-index:2}

.positionRelativeBox{ position:relative; z-index:1}

</style>

<div class="positionStickyBox"></div>

<div class="positionRelativeBox"></div>