CSS position: static이란?
position: static;은 CSS에서 요소의 위치를 정적(static)으로 설정하는 속성으로, 모든 HTML 요소에 기본적으로 적용되는 기본 위치 값입니다.
static이 지정된 요소는 일반 문서 흐름(normal flow)을 그대로 따르며, 별도의 위치 지정 없이 마크업 순서대로 화면에 배치됩니다.
static 포지셔닝의 핵심 특징
position: static이 적용된 요소에는 top, bottom, left, right 같은 오프셋 속성이 전혀 영향을 미치지 않습니다. 값을 지정하더라도 요소의 위치는 변하지 않으므로, 위치를 조정해야 하는 경우에는 relative, absolute 등 다른 position 값을 사용해야 합니다.
예제 코드
다음 코드를 실행하여 position: static 속성이 적용된 div 요소의 동작을 직접 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid blue;
}
</style>
</head>
<body>
<h1>Positioning Element</h1>
<div class="static">
div element with position: static;
</div>
</body>
</html>실행 결과
위 예제에서 파란색 테두리가 있는 div 요소는 일반적인 문서 흐름에 따라 제목(h1) 바로 아래에 배치됩니다. top이나 left 같은 속성을 추가해도 위치가 변경되지 않는 것을 확인할 수 있습니다.
참고: 다른 position 값과의 비교
요소의 위치를 자유롭게 제어하고 싶다면 relative(상대 위치), absolute(절대 위치), fixed(고정 위치), sticky(스티키 위치) 값을 사용하세요. 이 값들은 오프셋 속성과 함께 작동하여 원하는 위치에 요소를 배치할 수 있게 해줍니다.