CSS position 속성으로 요소 정렬하는 방법 (static·relative·absolute·fixed)

CSS에서는 위치 지정 방식(positioning scheme)인 static, relative, absolute, fixed와 오프셋 속성인 left, right, top, bottom을 조합하여 요소를 원하는 위치에 자유롭게 정렬할 수 있습니다.

CSS position 주요 값 이해하기

static – 기본값입니다. 요소가 일반적인 문서 흐름에 따라 배치되며, top·left 같은 오프셋 속성이 적용되지 않습니다.
relative – 요소가 원래 있던 자리를 기준으로 상대적으로 이동합니다. 동시에 자식 요소 중 position: absolute가 있을 때 그 기준점(컨테이닝 블록) 역할도 수행합니다.
absolute – position이 지정된(static 제외) 가장 가까운 조상 요소를 기준으로 배치됩니다. 문서 흐름에서 벗어나기 때문에 다른 요소와 겹칠 수 있습니다.
fixed – 브라우저 뷰포트를 기준으로 고정됩니다. 페이지를 스크롤해도 화면상 같은 위치에 계속 머무릅니다.

예제 1: 포지셔닝으로 요소 배치하고 정렬하기

다음 예제는 position 속성을 활용해 영화관 좌석처럼 요소를 배치하고 정렬하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>Alignment using CSS Position</title>
<style>
.screen {
   padding: 10px;
   width: 70%;
   margin: 0 auto;
   background-color: #f06d06;
   text-align: center;
   color: white;
   border-radius: 0 0 50px 50px;
   border: 4px solid #000;
}
.backSeats div{
   margin: 10px;
   padding: 10px;
   color: white;
   border: 4px solid #000;
   background-color: #dc3545;
}
.rightAbsolute{
   position: absolute;
   right: 0px;
   top: 80px;
}
.backLeftSeat{
   background-color: #dc3545;
   max-height: 100px;
   height: 70px;
   margin: 20px;
   width: 300px;
   display: inline-block;
   position: relative;
   resize: vertical;
   overflow: auto;
   border: 4px solid #000;
}
.withPosition{
   position: absolute;
   top: 50%;
   left: 20px;
   right: 20px;
   color: white;
   padding: 20px;
   transform: translateY(-50%);
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backSeats">
<div class="rightAbsolute">Premium Absolute Positioned Seat</div>
</div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 아래와 같은 결과가 출력됩니다.

CSS position 속성으로 요소 정렬하는 방법 (static·relative·absolute·fixed)

예제 2: relative · absolute · fixed 동작 차이 비교하기

두 번째 예제는 세 가지 position 값이 실제로 어떻게 다르게 동작하는지 한눈에 비교할 수 있도록 구성되어 있습니다.

<!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; /*relative to parent d1*/
}
#d3 {
   position: fixed;
   width: 30%;
   top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">In HBase, tables are split into regions and are served by the region servers. Regions are vertically divided by column families into “Stores”. Stores are saved as files in HDFS. HBase has three major components: the client library, a master server, and region servers. Region servers can be added or removed as per requirement.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 아래와 같은 결과가 출력됩니다.

CSS position 속성으로 요소 정렬하는 방법 (static·relative·absolute·fixed)

핵심 포인트 정리

#d1은 position: relative로 지정되어, 내부의 absolute 요소(#d2)에게 기준 컨테이너 역할을 합니다.
#d2는 bottom: 10px 설정 덕분에 부모 요소(#d1)의 하단에서 10px 위쪽에 배치됩니다.
#d3는 position: fixed로 설정되어 뷰포트 기준 top: 10em 위치에 고정되며, 페이지를 스크롤해도 화면에 그대로 유지됩니다.