CSS에서 요소의 위치 지정 방식을 static으로 설정하면, 해당 요소는 어떤 특별한 방식으로 배치되지 않고 일반적인 문서 흐름(normal flow)에 따라 렌더링됩니다.
중요한 점은, position: static;이 적용된 요소는 left, right, top, bottom 같은 CSS 위치 지정 속성의 영향을 전혀 받지 않는다는 것입니다. 즉, 이러한 속성 값을 아무리 지정해도 화면상의 위치는 변하지 않습니다.
예제 1 – 기본적인 static 위치 지정
다음은 CSS static 위치 지정 방법을 보여주는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: static;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
첫 번째 div 요소에 position: static;이 선언되어 있지만, 별도의 좌표 이동 없이 문서 흐름대로 그대로 표시되는 것을 확인할 수 있습니다.
예제 2 – static 외의 다른 위치 지정 방식 비교
이번에는 relative(상대), absolute(절대), fixed(고정) 위치 지정을 함께 사용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /* 부모 요소 d1 기준 */
}
#d3 {
position: fixed;
width: 30%;
top: 10em; /* 뷰포트(viewport) 기준 */
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph.
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
핵심 정리
- static: 기본값. 문서 흐름을 따르며 top/left/right/bottom 속성이 무시됨
- relative: 원래 자신의 위치를 기준으로 상대적으로 이동 가능
- absolute: position 속성이 지정된 가장 가까운 조상 요소를 기준으로 배치됨
- fixed: 브라우저 뷰포트를 기준으로 고정되어 스크롤해도 화면에 그대로 유지됨
static은 모든 요소의 기본 위치 지정 값이므로, 특별히 position 속성을 선언하지 않아도 자동으로 적용된다는 점을 기억해 두면 좋습니다.