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를 사용하면 됩니다.