[CSS] position 속성

1. position 속성
① relative
② absolute
③ fixed
④ sticky

---

1. position 속성

CSS에서 position 속성은 웹 문서상에서 요소를 배치하는 방법을 지정하는 속성이다.

사용가능한 속성 값으로는 'static', 'relative', 'absolute', 'fixed', 'sticky'가 존재한다.

position 속성을 통해 요소를 배치할 방법을 지정한다면 top, bottom, left, right 속성을 통해서

해당 요소의 상하좌우 위치 값을 입력하는 것으로 요소를 배치할 위치를 지정할 수 있다.

 

position 속성 값			설명
static			요소를 문서의 흐름에 맞춰서 배치한다. (기본 값)
relative			요소를 문서의 흐름에 따라, 상하좌우 속성 값에 따라 offset을 적용해서 배치한다.
absolute			요소를 문서의 흐름에서 제외해서 배치하고 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 offset을 적용한다.
fixed			요소를 문서의 흐름에서 제외해서 배치하고 해당 요소는 상하좌우 속성 값으로 지정한 위치에 고정된다.
sticky			요소를 문서의 흐름에 맞게 배치하고 스크롤되는 가장 가까운 상위 요소에 대해 offset을 적용한다.

offset
=> "상쇄하다.", "벌충하다." 
=> 컴퓨터에서의 offset은 동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소와 지정한 지점까지의
     변위차를 나타내는 정수형을 말한다. (출처: 위키백과 - 오프셋 (컴퓨터 과학))

let A = ['a', 'b', 'c', 'd', 'e', 'f'];
//이와 같은 배열이 존재한다면
//문자열 데이터 'c'는 A라는 배열의 시작 지점에서
//+2 만큼의 offset을 지니고 있다고 할 수 있다.

이제 position 속성 값에 대해 자세히 알아보도록 하자. (static은 기본값이라 제외한다.)

---

① relative

'position: relative;' 속성을 적용받은 요소는 일반적인 문서의 흐름에 따르며

top, bottom, left, right 속성을 통해 지정한 상하좌우 위치 값에 따라 offset을 적용해서 배치된다.

<!-- position: 'relative' 예제 (HTML 코드) -->

<div>요소 1</div>
<div id="div2">요소 2</div>
<div>요소 3</div>

 

/*position: 'relative'; 예제 (CSS 코드)*/

div {
  width: 100px; height: 100px;
  border: 2px solid black;
  background-color: green;
  font-family: bold;
  color: white;
}

#div2 {
  position: relative;
  left: 105px;
}

position: relative; 속성을 적용받았을 때 / 적용받지 않았을 경우

해당 예제에서 relative를 적용받은 div 요소가 문서의 흐름에 따르지만

지정한 위치 값(left: 105px)만큼 떨어져서 배치된 것을 위의 예제 실행 결과를 통해서 확인할 수 있다.

---

② absolute

position 속성 값을 'absolute'로 지정했을 경우에 해당 속성을 적용받은 요소는

문서의 일반적인 흐름에서 벗어나서 지정해둔 위치로 배치가 된다.

이때 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 offset을 적용받게 된다.

 

아래 예제를 통해서 확인해보자.

<!-- position: 'absolute'; 예제 (HTML 코드) -->

<div class="absM">
  <div class="abs">
    상위 요소 O
  </div>
</div>
<div class="abs">
  상위 요소 X
</div>

/* position: 'absolute'; 예제 (CSS 코드)*/

div {
  width: 200px; height: 200px;
  border: 2px black solid;
  background-color: yellow;
  color: white;
}

.absM {
  position: relative;
  top: 200px; left: 200px;
}

.abs {
  width: 100px; height: 100px;
  background-color: green;
  position: absolute;
  top: 95px; left: 95px;
}

위의 예제 코드를 실행한 결과를 살펴보면 똑같이 'position: absolute;' 속성을 적용받은 요소라고 해도

각기 다른 위치에 배치된 것을 확인할 수 있다. (위치 값은 서로 똑같이 지정했다.)

이는 abs1은 position 속성 값이 정의된 상위 요소가 존재하지 않고

abs2는 position 속성 값이 정의된 상위 요소가 존재하기 때문에 발생한 결과이다.

 

앞에서 설명한 것처럼 position 속성 값으로 absolute를 지정받은 요소는 가까운 상위 요소를 기준으로 offset을 적용하므로

상위 요소인 div 요소 (class="absM")를 기준으로 상하좌우 위치 값에 따라 요소 abs2를 배치를 하게 된다.

그리고 상위 요소가 없는 abs1은 브라우저 화면을 기준으로 상하좌우 위치 값에 따라 배치를 한다.

 

이를 통해서 같은 CSS 속성 값을 적용받은 요소라고 해도, position 속성이 지정된 상위 요소의 유무에 따라

위의 예제 실행 결과 사진과 같이 요소가 서로 다른 위치로 배치가 된다는 것을 확인할 수 있다.

---

③ fixed

position 속성 값을 'fixed'로 지정했을 경우에 해당 속성이 적용된 요소는 일반적인 문서의 흐름에서 빠져나오게 된다.

이후 top, bottom, left, right 속성으로 지정한 위치에 해당 요소가 고정된다.

아래 링크로 들어가서 나오는 예제를 통해서 확인해 보자.

<div class="fix"></div>

.fix {
  width: 75px; height: 75px;
  border: 2px solid black;
  background-color: blue;
  
  position: fixed;
  top: 50px; left: 100px;
}

 

CSS - position 속성 (fixed 예제)

해당 링크로 들어가서 나오는 예제를 실행해 보면 position 속성 값으로 'fixed'를 지정받은 요소는

문서의 스크롤을 내려도 해당 요소가 계속 고정된 상태가 되는 것을 확인할 수 있을 것이다.

---

④ sticky

Sticky는 "끈적끈적한", "달라붙는"이라는 의미를 가진 형용사로

CSS position 속성에서 속성 값을 'sticky'로 하면, 해당 속성을 적용받은 요소는 문서의 흐름에 맞게 배치가 된다.

그리고 스크롤되는 가장 가까운 상위 요소에 대해 offset을 적용하게 된다.

/* position: 'sticky' 예제 */

.stk {
  width: 75px; height: 75px;
  border: 2px solid black;
  background-color: blue;
  position: sticky;
  color: white;
  top: 30px; left: 30px;
}

 

CSS - position 속성 (sticky) 예제 (codepen)

 

위의 링크로 들어가서 예제를 실행해 보면 position 속성의 sticky를 지정받은 요소 (파란색 박스)가

문서의 흐름에 따라서 배치가 된 것과 스크롤을 내릴 때 해당 요소가 달라붙는 것처럼 고정돼서 내려오는 것을 확인할 수 있을 것이다.

앞에서 설명한 fixed처럼 지정한 위치에 고정된다는 점은 똑같지만

fixed는 문서의 흐름에서 벗어나서 요소가 지정된 위치로 배치된다면

sticky는 문서의 흐름을 따라서 요소가 지정된 위치에 배치된다는 차이점이 존재한다.

---

참고한 문서 및 강의

입문자를 위한 CSS 기초 강의 (인프런)(position 1편, 2편) MDN CSS 자습서 - position