[CSS] position: sticky 에 대해 알아보자

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

 

부모안에서 position fixed처럼 보이기도 하고 static처럼 보이기도 하는 sticky

 

sticky될 대상에는 아래처럼 지정한다.

 

.sticky {
    position: sticky;
    position: -webkit-sticky; /*safari*/
    top: 0;
    width: 100px; 
    height: 100px;
    background-color: orange;
}

 

그래도 sticky가 되지 않는다면 확인해봐야 할 것!

 

1. 부모의 높이가 충분히 지정되어 있는가?

 

2. 부모에 overflow속성이 지정되어 있는가?

sticky의 경우 부모에 overflow속성이 지정되어 있으면 sticky가 되지 않는다.

overflow: hidden;
overflow: auto;
overflow: scroll;

/*위의 속성이 지정되어 있으면 sticky가 되지 않는다!!*/

 

---

참고자료

[HTML/CSS] Position sticky 적용 방법