개발 기록 남기기✍️

[CSS] position : sticky 란? 본문

Front-End/HTML & CSS

[CSS] position : sticky 란?

너해동물원 2022. 12. 20. 09:25

position : Sticky

sticky는 static 속성과 fixed 속성의 특징을 동시에 가지고 있다.

sticky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해줘야 한다. sticky로 설정된 영역은 설정된 위치(예 : top : 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 스크롤 위치가 설정된 위치(임계점)에 다다르면 fixed 처럼 행동하는 속성이다.

 

예제

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Position Sticky</title>
</head>
<body>
  <div class="nav">Navigation</div>
  <div class="container">
    <div class="sidebar">
      <div class="inline-block static">static</div>
      <div class="inline-block fixed">fixed</div>
      <div class="inline-block sticky">sticky</div>     
    </div>
    <div class="inline-block long-text">Long Text Area.</div>
  </div>
</body>
</html>

 

CSS 코드

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  border: 2px solid;
}

.inline-block {
  display: inline-block;
  padding: .6rem;
}

.nav {
  flex: 1;
  width: 100%;
  height: 80px;
  border: 2px solid;
  margin-bottom: 5px;
}

.sidebar {
  flex: 1;
  height: auto;
  min-width: 220px;
}

.long-text {
  min-height: 200vh;
  background: #eee;
  flex: 1;
}

.static {
  position: static;
  background: orange;
}

.fixed {
  position: fixed;
  top: 99px;
  left: 155px;
  background: pink;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #8a4baf;
}

 

 

static

static 속성은 대부분의 HTML 태그들의 기본 속성이다. 의미 그대로 정적인 위치를 갖도록 한다.

위 예제에서 div.sidebar 안의 최상단에 자리를 차지하며 위치하는 것을 볼 수 있다.

 

fixed

fixed 속성을 갖는 영역은 viewport의 특정 좌표에 고정된다.

position 속성을 fixed로 설정하고, 위치를 설정하지 않으면 (x=0, y=0)으로 설정한 것처럼 보여지게 된다.

 

sticky

예제에서는 div.sticky의 위치를 top: 0;으로 설정했다.

viewport의 관점에서 최초에 페이지가 렌더링 되었을 때,

  • div.sidebar 영역은 div.nav 아래에 있는 div.container 안에 있기 때문에 div.sidebar의 y좌표는 0보다 큼.
  • div.sticky 영역은 div.sidebar 내부의 상단에 위치하기 때문에 div.sticky의 y좌표도 0보다 큼.

div.sticky 영역이 아직 설정한 위치인 top: 0;에 도달하지 않았기 때문에 마치 static인 것처럼 보이게 된다.

이 상태에서 스크롤을 하단으로 내리면 div.sticky 영역이 뷰포트의 y 좌표 0에 도달하는 순간, fixed 속성처럼 행동하게 된다.

 

 

 

sticky 속성이 동작하지 않는다면?

1. 도달 위치 설정이 되어 있는지 확인

sticky는 top, bottom, left, right 속성 중 하나는 반드시 필요하다. 기준 위치가 없기 때문에 동작하지 않을 수 있다.

 

2. 크로스 브라우징 및 브라우저 확인

Can I use를 보면 IE는 sticky를 지원하지 않는다. 하지만 IE 브라우저는 지원 종료되었기 때문에 고려하지 않는다. (IE에서는 sticky 사용 시 static으로 적용)

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

만약에 Safari에서 잘 동작하지 않는다면, 위와 같이 -webkit-sticky 속성을 추가해주면 된다.

 

3. 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인

sticky 의 경우, 부모 또는 조상 노드에 overflow 설정이 아래와 같이 설정되어 있으면 동작하지 않는다.

  • overflow : hidden
  • overflow : scroll
  • overflow : auto

 

4. 부모 노드의 height가 설정되어 있는지 확인

sticky 속성을 갖는 요소의 부모 노드는 반드시 height가 설정되어 있어야 한다. 그렇지 않으면 sticky 의 요소는 static 속성처럼 동작하게 된다.

height: x%;와 같이 퍼센트로 설정한 경우에는 동작하지 않는다.

올바른 예

  • height: auto
  • height: unset
  • height: 100vh
  • height: 1000px
  • height: 5em

 

 

 

 

작동 모습

sticky는 해당 container div 내에서만 fixed처럼 동작하는 것을 확인할 수 있다.

 

 

참고

[HTML/CSS] Position sticky 적용 방법

CSS { position: sticky }

저작자표시 (새창열림)

'Front-End > HTML & CSS' 카테고리의 다른 글

[CSS] Grid  (0) 2022.12.30
[CSS] Flexbox Froggy 솔루션  (0) 2022.12.16
[CSS] CSS 선택자 우선순위  (0) 2022.12.15
[CSS] 단위 설정  (0) 2022.07.07
[CSS] font  (0) 2022.07.07
'Front-End/HTML & CSS' Related Articles more