css position:sticky 적용 안될 때 when position sticky crash other position value

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>