css를 사용하여 엘리먼트 요소를 한 곳이 고정시키면서(fixed) 다른 요소와는 겹쳐지지 않는 방법(relative)을 알아봅니다.

position 프로퍼티를 사용하면 엘리먼트 요소를 고정하거나 상대적으로 이동하도록 정할 수 있습니다. 여러 값 중에서 position 설정으로 sticky 값을 사용할 수 있는데요 아래와 같이 css에 설정합니다.

position: sticky

sticky는 무엇이고 는 언제 왜 사용하는지 아래에서 알아보겠습니다.

# position sticky 알아보기

이처럼 position값을 Sticky로 설정할 경우 relative처럼 동작하면서 relative 요소가 없는 경우에는 fixed처럼 동작하는 두 가지 효과를 모두 가질 수 있습니다. 이런 레이아웃은 aside 요소... 즉 추가적인 콘텐츠를 계속해서 보여줄 때 많이 사용됩니다. 특히 수익 목적의 광고를 노출하는 경우에도 많이 쓰입니다. 실제로 유명한 매체 사이트에서도 sticky 속성을 사용할 웹사이트가 많이 존재합니다.

! sticky를 적용하기 위한 조건

top, bottom, left, right 등의 값을 필요로합니다. 즉 position: sticky가 제대로 동작하지 않는 경우 이처럼 방향 값의 설정 여부를 확인해야합니다. 또한! 부모 요소들 중 어느 하나라도 overflow: hidden 값인 경우에도 동작하지 않으므로 이 두 가지 값을 확인해야합니다.

1. top, left, bottom, right의 값 여부
2. 부모 요소에 해당하는 모든 엘리먼트의 overflow 값 hidden 여부 확인

그렇다면 어떻게 사용할 수 있는지 아래의 예제에서 자세히 알아보도록 하겠습니다.

# position sticky 예제보기

두 개의 엘리먼트를 나란히 만들고 position값으로 하나는 relative를 다른 하나는 sticky 값을 주어 어떻게 다른지 스크롤을 사용해 알아보려합니다. sticky가 적용된 요소는 움직이지 않고 고정되어야 할 것 입니다.

@ sticky.html

<div class="wrap">
<div class="ele1">
relative
</div>
<div class="ele2">
sticky
</div>
</div>

@sticky.css

.wrap {
width: 100%;
height: 2000px;
}
.ele1 {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: red;
}
.ele2 {
display: inline-block;
position: sticky;
top: 30px;
width: 80px;
height: 80px;
background: blue;
}

이제 위 코드를 실행하면 나란히 두 개의 엘리먼트 요소가 있게됩니다. 스크롤할 경우 relative는 시아에서 사라지게되지만 sticky는 다른 relative 요소를 만나기 전까지 해당 위치에 고정되어 나타나게됩니다. 실제 코드를 구현한 모습은 맨 아래에 있습니다.

! 호환되는 브라우저

현재 Sticky는 IE를 제외한 최신 브라우저(Edge 포함)에서 이상없이 동작합니다.

! sticky가 잘 구현되지 않는 경우 해결하기

만약 하단에서만 sticky가 동작하면 되는 경우라면 아래와 같이 3가지 css 속성들을 사용하여 보다 쉽게 만들 수 있습니다. 일단 기본적으로 sticky가 요소는 엘리먼트 위에 위치합니다.

position: sticky
margin-top: -100px;
padding-bottom: 100px

여기서 하단에 비워줄 여백의 크기는 padding-bottom을 사용하고 다시 margin-top -값을 사용하여 상쇄하여 줍니다.

# 실제 예제 동작해보기

실제로 구현할 경우에 아래처럼 나타납니다.