CSS를 사용하다보면 position 속성을 사용할 때가 많이 있는데요. 이번 글에선 이 position에 대해 설명해보려고 합니다.
CSS의 position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성입니다. position 속성에 쓸 수 있는 값은 5개가 있습니다. static, relative, absolute, fixed, sticky 이렇게 5개가 있는데요. 각각의 position이 어떻게 동작하는지 예시와 함께 보도록 하겠습니다.
- static(기본 값)
static은 element가 문서(HTML)에서 일반적인 흐름을 따라 배치가 되는데요. element에 position을 지정하지 않았을 때 기본으로 적용되는 값이 static 입니다.
position을 확인하고 싶다면 Chrome 개발자 도구에서 Elements > Computed에서 Show all에 체크를 하시면 확인하실 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div>Hello world!</div>
</body>
</html>
static의 경우 top, right, bottom, left, z-index 속성들이 아무런 효과를 주지 못합니다. 만약 div element에 top: 100px; 이라고 효과를 주어도 아무런 변화가 없는 것을 확인하실 수 있습니다.
이러한 효과를 주고 싶다면 position: relative를 사용하면 됩니다.
2. relative
static과 마찬가지로 element가 문서의 일반적인 흐름에 따라 배치가 됩니다. static과의 차이점은 element가 자신의 static 위치에서 top, right, bottom, left와 같은 속성에 의한 상대적인(relative) 위치에 배치된다는 점입니다. 이전 html 코드에서 div에 relative를 적용하고 top: 100px;을 주면 어떻게 될까요?
<!DOCTYPE html>
<html>
<body>
<div style="position: relative; top: 100px;">Hello world!</div>
</body>
</html>
위와 같이 이전에 element 자신이 배치되어있던 위치에서 top: 100px; 만큼 위치가 변경된 것을 볼 수 있습니다. 즉, position을 relative로 사용해도 top, right, bottom, left와 같은 속성을 주지 않았을 때 position을 staitc으로 지정했을 때와 같은 위치에 배치됩니다.
relative로 지정한 element는 다른 요소들의 위치에 영향을 주지 않는 특징을 가지는데요. position: relative이면서 top속성을 주었을 때와 주지 않았을 때 다른 요소들은 어떻게 되는지 아래의 이미지를 통해 비교하겠습니다.
<!DOCTYPE html>
<html>
<body>
<div style="position: relative;">Hello world!</div>
Hi!
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div style="position: relative; top:100px;">Hello world!</div>
Hi!
</body>
</html>
위의 결과처럼 relative가 적용된 요소의 배치만 변경되고 다른 부분의 배치에는 영향을 주지 않는 것을 확인할 수 있습니다. relative를 사용시 글자가 겹쳐지게도 보일 수 있으므로 주의가 필요합니다.
3. absolute
absolute는 element가 문서의 일반적인 흐름을 따르지 않습니다. 대신 가장 가까운 위치에 있는 조상 element(static 이 아닌)에 상대적 위치로 배치됩니다. 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.
먼저 조상 element가 있을 때의 코드를 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid black; position: relative; width: 100px; top: 100px;">
first div
<div style="border: 1px solid red; width: 200px;">
second div
<div style="position: absolute; top: 100px;">
absolute div
</div>
</div>
</div>
</body>
</html>
first div에서 100px 떨어진 위치에 absolute div가 위치한 것을 확인할 수 있습니다. 이 코드에서 firs div를 지울 경우엔 second div를 기준으로 100px 떨어진 위치에 배치되게 됩니다. 왜냐하면 가장 가까운 위치의 조상 element가 second div가 되기 때문입니다.
만약 조상 element가 없을 경우엔 어떻게 될까요?
<!DOCTYPE html>
<html>
<body>
<span>first</span>
<div style="position: absolute; top: 100px;">absolute div</div>
</body>
</html>
absolute div가 body를 기준으로 top: 100px 만큼 떨어진 위치에 배치된 것을 확인할 수 있습니다. absolute는 계산하기 까다로운 position입니다. 사용시 주의가 필요합니다.
4. fixed
fixed 역시 absolute와 마찬가지로 element가 문서의 일반적인 흐름에서 제거됩니다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.
뷰포트(viewport) : 웹페이지가 사용자에게 보여지는 영역
웹 페이지를 방문해보면 선택 박스 같은 것들이 스크롤을 아래로 내려도 따라다니는 것을 보신적이 있으실 겁니다. 이러한 기능을 fixed를 통해 구현할 수 있습니다. 예시 코드를 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body style="height: 3000px;">
<div style="position: fixed; top: 200px; left: 200px;">fixed div</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae voluptatem repellat velit error eius similique quia ducimus magni. Non ducimus tempora quod magni dolor odit optio quia error dolores aut.
</div>
</body>
</html>
스크롤을 확인하기 위해 body에 height: 3000px 값을 주었습니다. fixed div가 현재 보이는 화면에서 top: 200px; left: 200px; 만큼 떨어진 위치에 배치된 것을 확인할 수 있는데요. 스크롤을 하면 아래와 같이 됩니다.
스크롤을 해도 fixed div가 이전 화면에 보이던 그대로의 위치(top: 200px; left: 200px; 만큼 떨어진 위치)에서 보이는 것을 확인할 수 있습니다.
5. sticky
sticky는 element가 문서의 일반적인 흐름에 따라 배치되며 top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치됩니다.
그래서 sticky로 position을 지정했는데 top, right, bottom, left 속성이 주어지지 않으면 static으로 배치되는 위치와 같습니다.
sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는 특징을 가집니다.
예시 코드를 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<body style="height: 3000px;">
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, nisi adipisci qui rerum quaerat neque cumque debitis at aliquid ad perferendis vitae, asperiores vero possimus officiis facilis veritatis assumenda dolores?
</div>
<div style="position: sticky; top: 100px;">sticky div</div>
</body>
</html>
스크롤하기 전에 확인해보면 sticky div가 문서의 흐름에 따라 배치된 모습을 볼 수 있습니다. 이제 스크롤을 하면 어떻게 보일까요?
스크롤에 따라 containing box인 body에 따라 top: 100px 떨어진 위치에 배치된 것을 확인할 수 있습니다.
- fixed와 sticky의 차이점
fixed와 sticky 둘 다 스크롤을 하더라도 보여지는 공통점을 가지고 있는데요. 이 두 position의 차이점은 fixed는 문서의 흐름을 따르지 않고 뷰포트를 기준으로 배치가 되는 반면 sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치됩니다.
즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방할 수 있습니다.
<!DOCTYPE html>
<html>
<body style="height: 3000px;">
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro, nisi adipisci qui rerum quaerat neque cumque debitis at aliquid ad perferendis vitae, asperiores vero possimus officiis facilis veritatis assumenda dolores?
</div>
<div style="position: fixed; top: 100px; color: red;">fixed div</div>
<div style="position: sticky; top: 100px; color: blue;">sticky div</div>
</body>
</html>
이번 글에선 CSS Position에 대해 설명하였습니다.
긴 글을 읽어주셔서 감사합니다.
