CSS의 position 속성은 요소의 위치를 지정하는 방법을 결정합니다.
position 속성에는 static, relative, absolute, fixed, sticky 다섯 가지 값이 있습니다.
- static: 기본 값입니다. 요소를 일반적인 문서 흐름에 따라 배치합니다. top, bottom, left, right 속성을 적용해도 효과가 없습니다.
- relative: 요소를 일반적인 문서 흐름에 따라 배치하되, top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다. 자신을 기준으로 이동하므로 다른 요소들과의 위치를 비교하면서 이동할 수 있습니다.
- absolute: 가장 가까운 위치 지정이 있는 부모 요소를 기준으로 상대적으로 위치를 조정합니다. 부모 요소에 position 속성이 적용되어 있어야 하며, top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다. 부모 요소의 위치와는 독립적으로 위치를 지정할 수 있습니다.
- fixed: 뷰포트를 기준으로 위치를 조정합니다. 즉, 스크롤이 내려가도 항상 화면 상단이나 하단 등 지정한 위치에 고정되어 있습니다. top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다.
- sticky: 스크롤이 지정한 위치에 도달하면 요소가 고정되어서 유지됩니다. top, bottom, left, right 속성을 사용하여 위치를 지정합니다. 지정한 위치에 도달하기 전까지는 relative와 같은 방식으로 동작합니다.
위의 다섯 가지 position 값 중에서 relative, absolute, fixed, sticky 속성을 사용할 때는 top, bottom, left, right 속성과 함께 사용하여 요소의 위치를 조정할 수 있습니다. 이 속성들을 잘 활용하면 웹 페이지의 레이아웃을 다양하게 조정할 수 있습니다.
position: static
position: static은 기본 값으로, 요소를 문서 흐름에 따라 배치합니다. 위치를 조정하려면 top, bottom, left, right 속성을 사용할 수 있지만, 효과가 없습니다.
다음은 position: static을 적용한 예제입니다.
<div class="container">
<div class="box"></div>
</div>.container {
width: 400px;
height: 400px;
background-color: #eee;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
border: 2px solid #000;
}
위 코드에서 .container는 .box를 포함하는 요소입니다. .box는 position: static으로 지정되어 있으므로, 문서 흐름에 따라 .container의 왼쪽 상단 모서리를 기준으로 왼쪽에서부터 padding:20px, 위쪽에서부터 padding:20px의 위치에 배치됩니다.
위 예제에서 .box의 위치를 조정하려면 position 속성 값을 relative, absolute, fixed, sticky 중 하나로 변경해야 합니다.
position: relative
position: relative는 요소를 일반적인 문서 흐름에 따라 배치하되, top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다.
다음은 position: relative을 적용한 예제입니다.
<div class="container">
<div class="box"></div>
</div>.container {
width: 400px;
height: 400px;
background-color: #eee;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
border: 2px solid #000;
position: relative;
top: 20px;
left: 20px;
}
위 코드에서 .container는 .box를 포함하는 요소입니다. .box는 position: relative로 지정되어 있으므로, .container의 왼쪽 상단 모서리를 기준으로 왼쪽에서부터 padding:20px + left:20px, 위쪽에서부터 padding:20px+top:20px의 위치에 배치됩니다.
위 예제에서 .box의 top과 left 속성 값을 변경하면 요소가 이동합니다.
position: absolute
position: absolute는 요소를 문서 흐름에서 제거하고, 부모 요소 중 가장 가까운 position 값이 static이 아닌 요소를 기준으로 배치합니다. top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다.
다음은 position: absolute를 적용한 예제입니다.
<div class="container">
<div class="box"></div>
</div>.container {
width: 400px;
height: 400px;
background-color: #eee;
padding: 20px;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #f00;
border: 2px solid #000;
position: absolute;
top: 20px;
left: 20px;
}위 코드에서 .container는 .box를 포함하는 요소입니다. .box는 position: absolute로 지정되어 있으므로, 문서 흐름에서 제거되고, .container의 상위 요소인 body 대신 .container를 기준으로 왼쪽에서부터 20px, 위쪽에서부터 20px의 위치에 배치됩니다.
위 예제에서 .box의 위치를 조정하려면 top, bottom, left, right 속성 값을 변경하면 됩니다. 예를 들어, .box { top: 50px; left: 50px; }로 변경하면 .container의 왼쪽 상단 모서리를 기준으로 왼쪽에서부터 70px(20px+50px), 위쪽에서부터 70px(20px+50px)의 위치에 배치됩니다.
position: fixed
position: fixed는 요소를 뷰포트(Viewport) 기준으로 배치합니다. 즉, 스크롤을 내려도 화면의 고정된 위치에 요소가 고정됩니다. top, bottom, left, right 속성을 사용하여 위치를 조정할 수 있습니다.
다음은 position: fixed를 적용한 예제입니다.
<div class="header">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat tortor id ultricies tristique.</p>
</div>.header {
width: 100%;
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
nav {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
.content {
padding-top: 100px;
}위 코드에서 .header는 페이지 상단에 고정되는 헤더입니다. position: fixed로 지정되어 있으므로, 뷰포트 기준으로 위치가 지정됩니다. .content는 .header가 차지하는 영역을 고려하여 padding-top을 설정해주어야 합니다.
위 예제에서 .header의 위치를 조정하려면 top, bottom, left, right 속성 값을 변경하면 됩니다. 예를 들어, .header { top: 50px; }로 변경하면 뷰포트 상단에서부터 50px 아래쪽의 위치에 고정됩니다.
