CSS는 다음과 같이 구성되어 있습니다.

• CSS의 의미와 적용방법
• block과 inline의 차이점
• em과 rem의 차이
• Sass - CSS 전처리기
• CSS margin과 padding의 차이
• sticky 를 알아보자
• class와 id의 차이점
• CSS Flexbox - 자주 사용되는 것 정리

오늘은 요소를 화면에 고정시키는데 사용하는 position : sticky 에 대해서 알아보겠습니다.

position : sticky 와 position : fixed의 차이

화면에 고정시키는데는 대표적으로 position : fixed를 사용할 수 있습니다. position : sticky도 비슷한 특징을 가지고 있습니다. 하지만 이 둘의 차이점이 있습니다.

position : fixed의 경우에는 항상 화면에 요소가 고정이 되는 특징이 있고, position : sticky의 경우에는 스크롤 시에 해당 요소가 등장할 경우에 화면에 고정됩니다.

• fixed

• sticky

사용법

position : sticky와 함께 맨 위에서 부터 어느 위치에 고정시킬지 정의해주면 됩니다.

.sticky {
    position : sticky;
    top : 200px;
}

위와 같이 해주면 요소가 스크롤되어 보여질 때 맨 위에서부터 200px 만큼의 위치에 고정되어 보여집니다.

End.