CSS position: static 완벽 가이드

`position: static`

position 속성의 static 값은 초깃값입니다.
요소가 일반적인 문서의 흐름(normal flow)을 따라 배치됩니다.

HTML의 요소에 position 속성을 설정하지 않으면 초깃값인 position: static이 설정됩니다.

position: static이 설정되어 있는 요소는 top, bottom, left, right 속성으로 요소의 위치를 세부적으로 지정할 수 없는 정적인(static) 위치입니다.

position: static으로 설정된 요소는
top, bottom, left, right 속성과 z-index 속성이 적용되지 않습니다.

하지만, 요소는 일반적인 배치 규칙에 따라 위치하게 됩니다.
우선 해당 요소의 배치는 자신의 크고 작은 콘텐츠나 크기를 가지고 있으며, 그 주변에 패딩(padding), 보더(border), 마진(margin) 등을 추가하면서 최종 위치가 결정됩니다. 여기에 부모 요소의 서식(예: 플렉스 박스, 그리드 박스 등)에도 영향을 받습니다. 이렇게 요소는 기본적인 문서 흐름을 따라 배치됩니다.

예제

HTML

<p>
    position: static;은 요소에 position 속성을 지정하지 않았을 때 초깃값으로
    설정되는 값입니다.
</p>
<p class="static">
    이 요소는 position: static;으로 설정되어 있습니다.
    <br>
    요소가 다른 요소와의 관계에 의해 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p>
    position이 static으로 설정된 요소는
    <br>
    top, bottom, left, right 속성과 z-index 속성이 효과가 없습니다.
</p>