최근에 자기소개 웹페이지를 만들면서 HTML과 CSS를 많이 사용했다.
CSS를 사용할 때 마다 항상 드는 생각인데, 속성을 제대로 알고 사용하는 경우도 많지만, 스타일이 조금씩 꼬이기 시작하면 이것 저것 넣어보다가 때려 맞추는(?) 경우도 꽤 많은 것 같다. 오늘은 속성 중 positon에 대해 정리해보려고 한다.
position 속성이란?
position은 문서 상에 요소를 위에서부터 순서대로 쌓이게 배치할 것인지, 한 곳에 붙어있게 할 것인지 그 방법을 지정하는 속성이다.
1. static
일반적인 문서 흐름으로, 아무 속성도 지정하지 않았을 때의 값이다.
element들은 왼쪽에서 오른쪽, 위에서 아래 방향으로 순서대로 쌓인다.
따라서 top, left, right, bottom, z-index등 위치를 지정하는 속성들이 먹히지 않는다.
2. relative
element들을 먼저 기본 흐름대로 배치된 후,
자기 자신이 기준이 되어 top, left, right, bottom 값에 따라 위치를 움직인다.
하지만, 원래 위치에서 움직였다고 해서 남은 공간에 다른 element가 들어갈 수는 없다. relative 속성은 원래 위치에 있을 때 (이동하기 전)의 공간을 그대로 차지한다.
#box2 { position: relative; top: -10px; left: 10px; }
3. absolute
일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간을 배정하지 않는다. 따라서 relative와 다르게 다른 요소와 겹쳐질 수 있다.
대신, 본인의 부모 element 중 위치를 지정한 요소(relative 등)로 부터 top, left, right, bottom 값에 따라 상대적으로 배치한다.
#parent { position: relative; }# child { position: absolute; right: 0; }# absolute { position: absolute; right: 0; }왼쪽 상자는 relative 속성을 가진 부모 안에 있기 때문에, 그 부모를 기준으로 right: 0 속성을 적용하여 배치되었다.
반면에 오른쪽 상자는 위치를 지정한 부모 요소가 없기 때문에, body를 기준으로 right: 0 속성이 지정된 것을 볼 수 있다.
4. fixed
absolute와 마찬가지로 일반적인 흐름을 따르지 않고, 페이지 레이아웃에 공간을 지정하지 않는다. 브라우저가 렌더링하면서 정렬을 할 때, fixed 속성을 가진 element는 아예 제외하고 정렬한다.
absolute는 relative 부모를 기준으로 위치를 지정했다면, fixed는 브라우저 화면 자체를 기준으로 위치를 지정한다.
보통 웹사이트에서 스크롤에 상관없이 헤더를 상단에 고정시키는 등, 항상 화면 어딘가에 고정시켜 놓고 싶을 때 사용하는 속성이다.
아래 그림을 보면 스크롤이 된 화면에서도 "I'm fixed!"는 그 자리에 고정되어 있음을 알 수 있다.
#fixed { position: fixed; top: 10px; right: 10px; }
5. sticky
처음에는 static 속성을 유지하다가, 지정한 기준값(top, left, right, bottom)을 넘어가게 되면 fixed 속성이 되어 화면에 고정된다.
대신, sticky 속성을 가지고 있는 element의 바로 위 부모가 scroll되는 element여야 한다.
#stick { position: sticky; top: 0; background-color: rgba(0, 0, 0, 0.5); }첫 번째 사진을 보면 스크롤을 내리기 전에 "I'm sticky" element가 본인의 자리를 차지하고 있는 것을 볼 수 있다.
스크롤을 내리면서 top: 0을 넘어간 순간부터 fixed 되어 상단에 그대로 스티커처럼 붙어있다.
6. fixed vs sticky
HTML
<div id="box"> <div id="fixed">fixed</div> <div id="stick">stick</div> hello <br> ... </div>CSS
#box { width: 300px; height: 300px; overflow: scroll; }#fix { position: fixed; top: 0; right: 0; }#stick { position: sticky; top: 0; right: 0; }
fixed element는 box안에 선언되어 있어도 무조건 body를 부모로 지정해서 화면의 맨 오른쪽에 위치해있는 것을 확인할 수 있다.
하지만 sticky element는 스크롤되는 부모인 box로 부터 top: 0을 지정하여 box의 상단에 붙어 있다.
이번 블로그를 쓰면서, position 속성을 제대로 짚어볼 수 있게되었다.
언젠간 꼭 한번 짚고 넘어가야지 하면서도 코드 짜기에 바빠서 미뤘었는데, 진작 정리할걸 이라는 생각이 든다.
자기소개 페이지도 더 쉽게 만들 수 있지 않았을까? 🤦♂️
역시 궁금한건 미루면 안된다 😎❗
