CSS에서 position 속성은 요소의 위치를 지정하는 데 사용된다. 요소의 배치 방법을 정의하며, 다양한 레이아웃을 만들 때 중요한 역할을 한다. position 속성에는 5가지 주요 값이 있으며, 각 값에 따라 요소의 위치가 어떻게 결정되는지가 달라진다.
static (기본값)
position: static은 기본값이며, 요소는 일반적인 문서 흐름에 따라 배치된다. 다른 요소와 차지하는 공간에 영향을 미친다.
특징
top,right,bottom,left속성이 적용되지 않는다.- 요소는 문서의 자연스러운 흐름에 따라 배치된다.
예시
.static-box {
position: static;
top: 20px; /* 무시됨 */
}relative (상대적 위치)
position: relative는 요소를 기존 위치에서 상대적으로 이동시킬 수 있도록 한다. top, right, bottom, left 속성을 사용하여 이동할 수 있지만, 원래 공간을 차지한 상태로 배치된다.
특징
- 원래 위치는 그대로 유지되고, 해당 위치에서 이동한다.
- 다른 요소들에 영향을 미치지 않으며, 해당 요소는 여전히 문서 흐름에 영향을 준다.
예시
.relative-box {
position: relative;
top: 20px; /* 원래 위치에서 20px 아래로 이동 */
left: 30px; /* 원래 위치에서 30px 왼쪽으로 이동 */
}absolute (절대적 위치)
position: absolute는 요소를 가장 가까운 positioned 조상 요소를 기준으로 절대적으로 배치한다. 만약 positioned 조상 요소가 없다면, body 요소를 기준으로 배치된다.
특징
- 요소는 문서 흐름에서 제외된다. 즉, 다른 요소들은 그 자리를 차지하지 않는다.
top,right,bottom,left속성을 사용하여 위치를 조정한다.
예시
.absolute-box {
position: absolute;
top: 50px; /* 기준 요소에서 50px 아래 */
right: 30px; /* 기준 요소에서 30px 오른쪽 */
}fixed (고정 위치)
position: fixed는 요소를 브라우저 뷰포트(viewport)에 고정시킨다. 즉, 페이지를 스크롤해도 그 위치는 변하지 않는다.
특징
- 뷰포트를 기준으로 배치되며, 스크롤을 해도 그 위치에 고정된다.
- 문서 흐름에서 제외되며, 페이지의 다른 요소들이 해당 공간을 차지하지 않는다.
예시
.fixed-box {
position: fixed;
top: 10px; /* 화면 상단에서 10px 떨어진 위치 */
right: 10px; /* 화면 오른쪽에서 10px 떨어진 위치 */
}sticky (고정 + 스크롤에 따른 동작)
position: sticky는 요소가 특정 위치까지 스크롤되면 그 위치에 "고정"되도록 만든다. 이때, 그 요소는 부모 요소 내에서만 스크롤에 따라 고정된다.
특징
- 요소는 스크롤에 따라 위치가 바뀌다가 특정 지점에서 고정된다.
- 일반적으로 상단 고정 헤더를 만들 때 유용하게 사용된다.
top,right,bottom,left값과 함께 사용하여 고정될 위치를 설정한다.
예시
.sticky-box {
position: sticky;
top: 0; /* 화면 상단에 고정 */
}position 속성 값들의 상호작용
- 문서 흐름:
static과relative는 문서 흐름에 영향을 미치지만,absolute,fixed,sticky는 흐름에서 제외된다. - 참고:
absolute나fixed는top,left,right,bottom을 통해 정확한 위치를 지정할 수 있지만,relative는 요소의 원래 위치에서 상대적으로 이동시키기만 한다.
position 속성 예시: 고정된 내비게이션 바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
/* 네비게이션 바 */
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.content {
margin-top: 60px; /* 네비게이션 바를 뷰포트 상단에 고정시키고 아래 여백을 줌 */
padding: 20px;
}
</style>
</head>
<body>
<div class="nav">Fixed Navigation Bar</div>
<div class="content">
<h1>Welcome to the Page</h1>
<p>Scroll down to see the effect of the fixed navigation bar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<!-- 긴 내용으로 스크롤을 테스트 할 수 있습니다. -->
</div>
</body>
</html>위 예시에서 내비게이션 바가 position: fixed로 설정되어 스크롤을 해도 상단에 고정된 상태로 유지된다.
정리
- static: 기본값, 문서 흐름에 따라 배치.
- relative: 원래 위치에서 상대적으로 이동.
- absolute: 부모 요소 또는 문서의 특정 위치를 기준으로 절대적으로 배치.
- fixed: 뷰포트를 기준으로 고정.
- sticky: 스크롤에 따라 특정 위치에서 고정.
position 속성을 잘 활용하면 다양한 레이아웃을 구현할 수 있다. 각 값의 특징을 잘 이해하고 필요한 레이아웃에 맞게 적절하게 사용하면 유용하다.
