position: relative

position 속성의 relative 값은
요소가 static 값처럼 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치되며, 원래 배치된 위치를 기준으로 top, bottom, left, right 속성으로 상대적인 간격(offset, 오프셋)을 적용하는 위치 지정 방식입니다.

이 위치 지정 방식을 relative positioning이라고 합니다.

알아두세요!
position 속성은 table-column-group(<colgroup>) 및 table-column(<col>)에 적용되지 않으므로, 해당하는 요소들은 position: relative에 영향을 받지 않습니다.

특징

position: relative로 설정된 요소는 다음과 같은 특징이 있습니다.

  • 원래 배치된 위치에서 간격(offset, 오프셋)이 적용되더라도 주변의 다른 요소의 위치에 영향을 미치지 않습니다.
  • 간격(offset, 오프셋)의 조정은 순전히 시각적 효과이며, 페이지 레이아웃에서 요소에 주어진 공간은 static 값일 때와 동일합니다.
  • 그런데, 이 요소를 감싸고 있는 컨테이너의 overflow 속성 값에 따라 내용이 컨터이너의 경계를 넘어가면 그 내용은 컨테이너(또는 해당 요소)의 영역을 벗어나게 되어 스크롤바가 생기는 등의 레이아웃에 영향을 줄 수 있습니다.
  • z-index가 auto 값이더라도 요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현됩니다. 즉, 일반적인 형제 요소(position: static이 설정된 형제 요소)보다 쌓임 순서가 높습니다. 단, 테이블 내부를 구성하는 요소들(<thead>, <tbody>, <tfoot> 같은 테이블 그룹 요소나 <tr> 요소와 <caption> 및 <td>, <th>)에 대한 효과는 명세서에서 정의하고 있지 않습니다.

간격(offset, 오프셋) 지정 속성

다음은 원래 배치된 위치를 기준으로 상대적인 간격(offset, 오프셋)을 지정하는 속성입니다.

relative에서 사용하는 간격(offset, 오프셋) 지정 속성
속성설명
top 요소를 원래 위치에서 위쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 bottom 속성 값에 따라 결정되며, bottom 속성도 auto 값이라면 요소의 위쪽과 아래쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
bottom 요소를 원래 위치에서 아래쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 top 속성 값에 따라 결정되며, top 속성도 auto 값이라면 요소의 위쪽과 아래쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
left 요소를 원래 위치에서 왼쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 right 속성 값에 따라 결정되며, right 속성도 auto 값이라면 요소의 왼쪽과 오른쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.
right 요소를 원래 위치에서 오른쪽 간격을 지정합니다. (양수 길이 값: 안쪽, 음수 길이 값: 바깥쪽)
auto 값일 경우에는 left 속성 값에 따라 결정되며, left 속성도 auto 값이라면 요소의 왼쪽과 오른쪽 간격은 지정되지 않습니다. 값을 지정하지 않으면 auto 값이 설정됩니다.

간격(offset, 오프셋) 지정 속성에서 지정하는 길이 값에는 백분율(%)을 사용할 수 있으며,
top과 bottom 속성은 컨테이닝 블록(containing block)의 높이를 기준으로, left와 right 속성은 너비를 기준으로 간격을 지정합니다.

테이블 내부 요소에서의 간격(offset, 오프셋) 지정

<thead>, <tbody>, <tfoot> 같은 테이블 그룹 요소나 <tr> 요소에 top, bottom, left, right 속성으로 간격(offset, 오프셋)을 적용하면 그 내부의 모든 테이블 셀(<td>, <th>)도 함께 이동합니다.

단, 테이블 셀(<td>, <th>)이 다른 <tr> 요소에서 시작된 경우(예: rowspan으로 인해 다른 행과 연결된 셀)는 해당 이동의 영향을 받지 않습니다.

예제

다음의 예제들을 통해서 position: relative의 구현 방식을 확인해 보세요.

간격(offset, 오프셋) 지정 속성의 값을 지정하지 않은 경우

요소에 position: relative를 설정한 후 top, bottom, left, right 속성의 값을 지정하지 않으면, 이 속성들은 모두 auto 값으로 설정됩니다. 즉, 모든 간격(offset, 오프셋)들은 지정되지 않습니다.

이러한 요소는 원래 위치를 기준으로 배치되며, 문서 흐름(normal flow) 내에서 다른 요소와의 관계에 따라 배치됩니다. 간격(offset, 오프셋)이 적용되지 않아 요소는 마치 position: static이 설정된 것처럼 위치가 변하지 않고, 그 자리를 차지한 상태로 배치됩니다.

HTML 
<p>
    position: relative;는 static 값처럼 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p class="relative">
    이 요소는 position: relative;로 설정되어 있습니다.
    <br>
    요소가 다른 요소와의 관계에 의해 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
</p>
<p>
    하지만, 원래 배치된 위치를 기준으로
    <br>
    top, bottom, left, right 속성으로 상대적인 간격(offset, 오프셋)을 적용하는 방식입니다.
</p>
<p>
    만약 top, bottom, left, right 속성이 지정되어 있지 않으면
    <br>
    요소는 마치 position: static이 설정된 것처럼 위치가 변하지 않고,
    <br>
    그 자리를 차지한 상태로 배치됩니다.
</p>
CSS 
.relative {
    position: relative;
    border: 3px solid yellowgreen;
}
실제 적용된 모습

간격(offset, 오프셋) 지정 속성의 값을 지정한 경우

요소에 position: relative를 설정한 후 top, bottom, left, right 속성의 값을 지정하면,
요소는 원래 배치된 위치를 기준으로 간격(offset, 오프셋)을 적용합니다. 이때 원래 배치된 위치에서 간격(offset, 오프셋)이 적용되더라도 주변의 다른 요소의 위치에 영향을 미치지 않습니다.

여기에서는 두 가지 측면의 예제를 살펴 보겠습니다.

  1. 간격(offset, 오프셋)의 조정은 순전히 시각적 효과이며, 페이지 레이아웃에서 요소에 주어진 공간은 위치가 static 값일 때와 동일합니다.
  2. 이 요소를 감싸고 있는 컨테이너의 overflow 속성 값에 따라 내용이 컨터이너의 경계를 넘어가면 그 내용은 컨테이너(또는 해당 요소)의 영역을 벗어나게 되어 스크롤바가 생기는 등의 레이아웃에 영향을 줄 수 있습니다.
요소에 주어진 공간은 위치가 static 값일 때와 동일

요소에 position: relative를 설정한 후 간격(offset, 오프셋)을 적용하더라도 요소에 주어진 원래 공간은 static 값일 때와 동일합니다.

HTML 
<section>
    <div class="box">Box</div>
    <div class="box relative-box">Relative Box</div>
    <div class="box">Box</div>
    <div class="box">Box</div>
</section>
CSS 
section {
    padding: 1em;
    background-color: beige;
}
.box {
    width: 100px;
    height: 100px;
    background-color: silver;
    margin: 1em;
}
.box.relative-box {
    position: relative;
    top: 150px;
    left: 120px;
    background-color: gold;
}

실제 적용된 모습을 보면 position: relative를 설정한 요소는 간격(offset, 오프셋)을 적용하더라도 요소에 주어진 원래 공간이 static 값일 때와 동일합니다.

실제 적용된 모습
요소가 간격(offset, 오프셋)의 조정으로 컨테이너에 오버플로(overflow)될 경우

요소에 position: relative를 설정한 후 간격(offset, 오프셋)을 적용한 후 이 요소를 감싸고 있는 컨테이너의 overflow 속성 값에 따라 내용이 컨터이너의 경계를 넘어가면 그 내용은 컨테이너(또는 해당 요소)의 영역을 벗어나게 되어 스크롤바가 생기는 등의 레이아웃에 영향을 줄 수 있습니다.

HTML 
<section>
    <p>
        position: relative;는 static 값처럼 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
    </p>
    <p class="relative">
        이 요소는 position: relative;로 설정되어 있습니다.
        <br>
        요소가 다른 요소와의 관계에 의해 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.
    </p>
    <p>
        하지만, 원래 배치된 위치를 기준으로
        <br>
        top, bottom, left, right 속성으로 상대적인 간격(offset, 오프셋)을 적용하는 방식입니다.
    </p>
    <p>
        요소가 간격(offset, 오프셋)의 조정으로 컨테이너에 오버플로(overflow)될 경우
        <br>
        스크롤바가 생기는 등의 레이아웃에 영향을 줄 수 있습니다.
    </p>
</section>
CSS 
section {
    box-sizing: border-box;
    width: 300px;
    padding: 1em;
    background-color: beige;
    overflow: auto;
}
.relative {
    position: relative;
    left: 100px;
    border: 3px solid yellowgreen;
}
실제 적용된 모습

요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현

요소에 position: relative를 설정하면 z-index가 auto 값이더라도 요소는 새로운 쌓임 맥락(Stacking context)을 생성한 것처럼 구현됩니다. 즉, 일반적인 형제 요소(position: static이 설정된 형제 요소)보다 쌓임 순서가 높습니다.

HTML 
<h5>static인 형제 요소끼리의 쌓임 맥락</h5>
<p>나중에 마크업한 요소의 쌓임 순서가 높습니다.</p>
<div class="box first">first</div>
<div class="box second">second</div>

<h5>static인 형제 요소와 relative 요소의 쌓임 맥락</h5>
<p>relative 요소의 쌓임 순서가 높습니다.</p>
<div class="box first relative">first relative</div>
<div class="box second">second</div>
CSS 
.box {
    color: #fff;
    width: 150px;
    height: 200px;
    border: 5px solid;
}
.first {
    background-color: rgba(255, 51, 0, 0.7);
    border-color: rgb(255, 51, 0);
}
.second {
    background: rgba(0, 102, 204, 0.7);
    border-color: rgb(0, 102, 204);
    margin-top: -100px;
}
.relative {
    position: relative;
}
실제 적용된 모습
position 속성과 relative 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
position 1 12 1 1
relative 1 12 1 1

명세서

position: relative의 명세서 사양
명세서 사양
position: relative CSS Positioned Layout Module Level 3
#valdef-position-relative
Relative Positioning CSS Positioned Layout Module Level 3
#relpos-insets

같이 보기