[CSS] fixed sticky

출처: MDN

 

fixed

fixed의 설명을 보면 다음과 같은 문장이 있습니다.

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport.
...
This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

해당 요소는 정규 문서 흐름에서 제거되고 페이지 레이아웃에서 요소를 위한 공간이 만들어지지 않는다는 점입니다. 뷰 포트가 생성한 최초 컨테이닝 블록에 상대적인 위치를 가진다는 설명도 있네요. 추가적으로 fixed는 새로운 stacking context를 가진다고 합니다. 모든 페이지에서 같은 위치에 놓입니다. stacking context는 z축을 사용하는 HTML 요소의 3차원 개념입니다. 사용자가 뷰 포트 혹은 웹 페이지를 바라보는 것을 가정합니다. 추후에 따로 정리하겠습니다. 정규 문서 위에 fixed을 위한 공간이 만들어지는 겁니다. 다음 코드과 결과물을 보시죠.

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel similique accusamus delectus nihil magni nemo modi dicta, quam libero voluptatem repudiandae natus? Laborum maxime laudantium ea omnis quia quas culpa.</p>
<div>This is box</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel similique accusamus delectus nihil magni nemo modi dicta, quam libero voluptatem repudiandae natus? Laborum maxime laudantium ea omnis quia quas culpa.</p>

body {
  height: 5000px;
}
div {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  background-color: red;
}

 <div>This is box</div>가 p 태그들 사이에 있음에도 불구하고 위에 착 붙어 있습니다.

빨간색 영역은 말 그대로 정규 문서 위에 있습니다. 정규 문서 안에 fixed 속성을 위한 공간이 없는 것입니다.

하지만 sticky는 정규 문서 안에 포함됩니다. fiexed처럼 새로운 stacking context를 가지는 것은 같습니다.

This value always creates a new stacking context. Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior.

sticky 요소는 조상이 가장 가까운 스크롤링 조상이 아니더라도, overflow 속성이 hidden, scroll, auto or overlay으로 생성된 스크롤 매커니즘을 가진, 가장 가까운 조상에 고정됩니다.

 

 

sticky는 ie에서 지원하지 않습니다. 스크롤을 하면 top이든 bottom이든 설정한 위치에 딱 걸립니다.

sticky가 없던 시절에는 javascript를 이용해서 동적으로 fixed를 적용했다고 하는데 직접 구현하게 되면

올리겠습니다.