[css/공부] sticky

sticky 알아보기

 

 

---

       sticky란? 

스크롤을 내렸을 때 화면 위에 딱 달라붙어 사라지지 않는 position값이다.

position의 값에는 sticky 외에도 fixed, relative, absolute, static 등이 있다.

 

언제 사용할까?

네비게이션이나 목차, 버튼을 화면에 고정시키고 싶을 때 사용한다.

 

 

---

       sticky를 사용하기 위한 기본 CSS 

css 파일에서 고정시키고 싶은 요소에 아래와 같이 작성하면 된다.

position: sticky;
top: 0; //고정시키고 싶은 위치 지정

 

 

 

---

       sticky를 사용하기 위한 조건 

sticky가 작동하려면 아래 몇가지 조건이 만족되어야 한다.

 

01 부모 요소의 길이

sticky가 작동하기 위해서는, 부모요소의 길이가 충분히 길어야 한다.

부모요소의 영역이 끝나면 자식을 끌고 올라가기 때문!

 

02 스크롤 가능 여부

스크롤 가능 영역에서만 작동하기 때문에, 부모 요소에 아래와 같은 속성이 설정되어있으면 작동하지 않는다.

//부모 요소에 아래 코드가 없어야 함
overflow: hidden;
overflow: visible;

 

03 부모 요소의 디스플레이 값

display: inline;으로 설정되어 있어도 작동하지 않는다.

//부모 요소의 display 속성이 아래와 같아야함.
display: block;
display: flex;

 

 

---

실습을 하려는데 sticky 때문에 몇시간동안 애를 먹었다..
그래서 공부하다가 정리하기로 한 것!
찾아보기 전에 왜 안되는지 계속 고민하고 조금씩 힌트를 얻으면서 풀어나갔는데,
이런 방식은 좀 비효율적인 것 같다. 먼저 제대로 공부하고 사용해보는 게 나을듯