(CSS) CSS Position 설명

11 min readNov 9, 2019

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>

Chrome Dev Tools_Elements_Computed Show all

static의 경우 top, right, bottom, left, z-index 속성들이 아무런 효과를 주지 못합니다. 만약 div element에 top: 100px; 이라고 효과를 주어도 아무런 변화가 없는 것을 확인하실 수 있습니다.

이러한 효과를 주고 싶다면 position: relative를 사용하면 됩니다.

(CSS) CSS Position 설명

Written by Su Bak