[CSS] 레이아웃(Lay-out) -Position 편(relative, absolute, fixed)

Position 속성?

: 웹 문서의 요소들을 어떻게 배치할 지 정하는 속성.

원래는 html에 작성한 순서대로 배치되지만, Position 속성을 이용하면 (html 코드의 순서와 상관없이) 📌 내가 원하는 위치에 요소를 배치할 수 있다.

Position 속성의 종류

: 총 5가지

종류	특징
static	기본(Default)값. 요소를 문서 흐름에 맞추어 배치.
relative	상대적 위치 지정. html 코드 상 원래 있어야 할 위치(static) 기준으로 배치.
absolute	절대적 위치 지정. 부모 요소 중 position 값을 가지는 요소 기준으로 배치.
fixed	지정한 위치에 고정. 브라우저 창 기준으로 배치.
sticky	위치에 따라서 동작방식이 달라짐. 임계점(scroll -box기준) 이전에는 relative처럼 동작. 그 이후에는 fixed처럼 동작.

1) position: static;

• position값을 지정하지 않은 기본값과 같다.
• html 코드의 순서대로 배치된다.

2) ✅ position: relative;

• 원래 html 코드 흐름상 배치되는 위치를 기준으로 배치된다.
• position: relative; 자체로는 아무것도 바뀌지 않는다.
• top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.

div {
  width: 200px;
  height: 100px;
}

.redBox {
  background: red;
}

.blueBox {
  background: blue;
  position: relative;⭐️
  left: 100px;⭐️/*왼쪽에서 (오른쪽으로) 100px*/
  top: 20px;⭐️/*위에서 (아래로) 20px*/
}

3) ✅ position: absolute;

• 특정 부모 요소를 기준으로 절대적으로 배치된다.
• 특정 부모 요소 : position값이 지정된 부모 요소
• 일반적으로, 기준이 될 부모에게 position: relative;를 부여한다.

<!--html-->
<div class="container">
  <div class="blueBox"></div>
</div>

/*css*/
.container {
  width: 300px;
  height: 200px;
  position: relative;⭐️
  background: red;
}

.blueBox {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;⭐️
  right: 30px;⭐️/*오른쪽에서 (왼쪽으로) 30px*/
  bottom: 30px;⭐️/*아래에서 (위로) 30px*/
}

부모(빨간컨테이너)를 기준으로 right, bottom값이 주어진 것을 알 수 있다.

4) ✅ position: fixed;

• 부모 요소 필요 ❌ 해당 요소에 position: fixed;를 부여한다.
• 원하는 위치에 고정되어 스크롤을 내려도 따라온다.
• 배치 기준 : 브라우저 창

.blueBox {
  width: 100px;
  height: 100px;
  background: blue;
  position: fixed;⭐️
  right: 20px;
  bottom: 20px;
}

5) position: sticky;

• 평소에는 relative 처럼 작동.
  ➪ Scroll이 해당 요소의 위치를 넘어가면 그때부터 fixed 처럼 고정되어 따라간다.