CSS에서 정적 위치 지정(static positioning)은 모든 HTML 요소에 적용되는 기본 위치 지정 방식입니다. 요소가 일반적인 문서 흐름(normal flow)을 따라 배치되며, top, bottom, left, right 속성의 영향을 전혀 받지 않습니다.
position: static이란?
정적 위치 지정을 사용하려면 요소에 position: static;을 선언합니다. 사실 이 값은 기본값이기 때문에 별도로 지정하지 않아도 대부분의 요소에 자동으로 적용됩니다.
- 요소가 문서의 일반적인 흐름대로 위에서 아래로 배치됩니다.
top,right,bottom,left속성이 지정되어 있어도 무시됩니다.z-index역시 효과가 없습니다.
예제 코드
다음 예제는 position: static이 적용된 div 요소가 어떻게 렌더링되는지 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
color: white;
background-color: orange;
border: 2px dashed blue;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<p>데모 텍스트입니다.</p>
<p>데모 텍스트입니다.</p>
<div class="static">
position: static;
</div>
<p>또 다른 데모 텍스트입니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 주황색 배경과 파란색 점선 테두리를 가진 div 요소가 일반 문서 흐름에 따라 단순히 배치되는 것을 확인할 수 있습니다. top이나 left 같은 좌표 속성을 추가해도 요소의 위치는 전혀 변하지 않습니다.
언제 static을 사용할까?
static은 특별한 위치 조정이 필요 없는 일반적인 콘텐츠 배치에 적합합니다. 반면 요소를 자유롭게 배치해야 한다면 relative, absolute, fixed, sticky 같은 다른 position 값을 사용하는 것이 좋습니다.