css를 이용해 position 값을 사용하다보면
주로 사용하는 position 값은 static, relative, absolute, fixed
이 4가지가 될 것이다.
그도 그럴것이 이번에 소개할 position 값인 sticky의 경우엔
IE(익스플로어)에선 아예 지원을 하지 않는 속성이기 때문에
평소에 사용하는데에 어려움이 있었다.
하지만 이젠 IE의 점유율이 줄어들어 IE를 고려하지 않는 작업이 많아지고
모바일 작업을 중점으로 하는 경우도 많기 때문에
position : sticky 에 대해 알아두면 좋을 것 같아서 포스팅 하게 되었다.
1. position : sticky 의 개념
sticky 라는 단어의 뜻에서 알 수 있듯이
sticky 속성값을 선언한 영역의 위치값을 고정시켜주는 역할을 한다.
백번의 설명보다 한 번의 예시가 더 도움이 될 것이다.
<style>
.wrap{height:500px; overflow:hidden; overflow-y:scroll;}
.inner{height:200px; background:skyblue;}
.box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;}
</style>
<body>
<div class="wrap">
<div class="inner">
<div class="box"></div>
</div>
</div>
</body>위의 소스를 출력했다고 가정했을 때 아래와 같이 검은색 상자모양의 영역이 스크롤할 때에
고정이 되어 노출되는 것을 알 수 있다.
[!] 주의할 점은 position : sticky 를 사용하면 top, left와 같은 위치값을 반드시 작성해줘야 sticky 속성을 적용할 수 있다.
2. position : fixed와 position : sticky의 차이와 특징
위의 예시만 봤을 때 들 수 있는 생각은 fixed 속성과 sticky 가 뭐가 다르지? 라는
의문이 생길 수 있다.
아래의 예시를 보면 sticky의 특징을 더 잘 살펴봄과 동시에 fixed와의
차이점도 이해할 수 있다.
<style>
.wrap{height:500px; overflow:hidden; overflow-y:scroll;}
.inner{height:100px; background:skyblue;}
.inner2{height:100px; background:#0f9d58;}
.box{position:sticky; top:10px; left:10px; width:50px; height:50px; background:#000;}
</style>
<body>
<div class="wrap">
<div class="inner">
<div class="box"></div>
</div>
<div class="inner2"></div>
</div>
</body>
스크롤의 위치가 sticky 처리를 한 검은색 박스 영역의 부모 요소인
.inner 영역을 벗어나고 .inner2 영역으로 스크롤이 넘어가자
.box 영역은 더 이상 스크롤을 따라오지 않고 .inner 영역 끝 부분에 걸리게 된다.
즉 sticky 속성은 sticky 선언한 영역의 부모 요소 안에서만
고정되어 스크롤에 따라 움직이게 된다는 것을 알 수 있다.
그렇기 때문에 fixed와도 확연히 다르다는 것을 알 수 있다.
페이지 전체 영역을 기준으로 고정이 되는 fixed와 다르게
sticky의 경우는 부모요소를 기준으로만 움직이기 때문이다.
'Frontend > CSS' 카테고리의 다른 글
| css 방법론 (methodology) - SMACSS, BEM, OOCSS (0) | 2021.03.19 |
|---|---|
| CSS Supports, @supports (지원하는 css에 따른 스타일 적용) (0) | 2020.11.30 |
| [css 속성] text-size-adjust (모바일 폰트 크기 조정 관련) (0) | 2020.10.13 |
| [css 속성] user-select (텍스트 선택, 드래그 설정) (0) | 2020.10.12 |
| [css 속성] border (0) | 2020.08.25 |