[CSS] relative position과 absolute position의 이해

🔥 CSS position relative와 absolute의 비교

css position property 중에서 가장 헷갈리는 relative와 absolute를 비교해봅니다.
저는 이 두가지가 상당히 헷갈렸습니다. 가장 큰 이유는 static에 대한 이해가 없었기 때문인 것 같습니다.

static은 position의 default값입니다.
top/right/bottom/left 값을 무시합니다. static상태를 움직이게 하는 position이 relative입니다.

absolute는 static한 상태 자체를 없애버립니다. relative 을 갖고 있는 부모에 대해 absolute한 좌표 값을 가집니다.
absolute을 주면, 해당 css property는 유령이 됩니다. 본인의 고유자리를 잃고 그 다음 element가 static하게 그 자리를 차지합니다.

제가 한 얘기들이 당장 이해가 안되시면, 아래 내용을 읽고 두세번 곱씹어보면 이해될 수 있습니다.
codepen에 직접 값을 넣어보는 것이 가장 도움이 됩니다!

(중요 ** 글 가장 아래에 이 글에서 잘못된 부분에 대해 추가 설명하였습니다. )

---

🐌 Content

아래 step으로 설명합니다.

1️⃣ relative position
2️⃣ absolute position
3️⃣ developer tool에서는 어떤가?

relative와 absolute의 비교

🍒 Pre-Description

position에서 가장 헷갈리는 relative와 absolute에 대해 알아봅니다.
먼저! 아래 내용을 숙지하고 글을 읽어주세요.

뭐에 대해 relative냐?

static에 대한 relative(상대 좌표)를 의미합니다.

뭐에 대해 absolute냐?

relative에 대한 absolute(절대 좌표)를 의미합니다.

**~에 대한** ➡ 이게 포인트입니다.

static은 css position의 default 상태입니다. 즉 아무것도 하지않고, element를 쭉 쓰면 position은 static입니다.
static하다는 것은 모두 본인자리에 있는 것을 말합니다.(static은 top/right/bottom/left가 먹히지 않습니다.) 아래 코드를 봅시다.

---

1️⃣ relative position

See the Pen css_static_relative by stefan-CHO (@stefan-cho) on CodePen.

위 codepen 코드에서 css만 수정해봅시다.
codepen의 css는 static만 있는 경우입니다.

.static01 {
  background-color: #e74c3c;
  width: 400px;
  height: 40px;
}

.static02 {
  position: relative;
  top: 20px;
  background-color: #e67e22;
  width: 400px;
  height: 40px;
}

.static03 {
  background-color: #f1c40f;
  width: 400px;
  height: 40px;
}

line8, line9를 추가하면 중간의 static02는 relative가 되고 (static은 top/right/bottom/left를 적용할 수 있게 되었다는 뜻), 본인의 static자리 기준으로 자유롭게 움직일 수 있게 됩니다.
line8, line9를 codepen에 추가하면 static02(주황색 박스)가 static03(노란색 박스)를 overlap하는 것 처럼 나타납니다.

그러면 이때 static01,static03 의 상태는 어떨까요? 가만히 있는 상태입니다. static 이기 때문이죠! static은 다른놈이 움직이던 말던 가만히 있습니다.

실제로 static03은 static position이기 때문에 본인자리를 지키고 있는 것이고, static02는 relative position(relative = static + top/right/bottom/left)으로 이동가능하게 된 것입니다.

relative는 static 상태에 위치조정능력을 부여하는 것이다! 라고 이해하면 됩니다. (이해됬겠죠?)

---

2️⃣ absolute position

아래 codepen 예제를 봐주세요.

See the Pen css position by stefan-CHO (@stefan-cho) on CodePen.

absolute와 relative의 관계

absolute는 relative에 대한 좌표라고 했습니다. 즉 부모(parent) relative를 찾고, relative position을 갖는 가장 가까운 부모의 origin(원점)을 기준으로 top/right/bottom/left를 움직입니다.
(origin은 항상 왼쪽위 입니다.)

부모 element에 relative position이 없다면 어떻게 될까요?

쭉쭉 찾아올라가다가 끝까지 없으면 body에 대해 absolute가 됩니다.

absolute에 값을 주면?

우선 아래 css코드를 위의 codepen 예제에 적용시켜 봅시다. (top, right 추가)

.absolute {
  position: absolute;
  top: 40px;
  right: 40px;
  background-color: #34495e;
  width: 100px;
  height: 100px;
}

absolute class의 현재 position은 absolute입니다. absolute는 relative에 대한 이라고 했죠?
현재 가장 가까운 부모 relative는 누구인가요? parent class입니다.
따라서 absolute는 relative의 origin(왼쪽 위)를 기준으로 top/right/bottom/left를 적용할 수 있습니다.(아래 absolute 수정코드)

참고사항: absolute의 부모로 relative 대신 fixed도 가능합니다!

---

3️⃣ developer tool에서는 어떤가?

absolute의 값을 주지 않으면, static일 때 위치를 default로 갖는다.

아래이미지의 오른쪽은 developer tool의 Elements에 Computed의 화면입니다.(Firefox 사용)
position이 추가되니 margin외곽에 position이 생겼습니다.
여기서 주목해야할 점은 현재 absolute에 기본값이 100이 들어있다는 것 입니다. (빨간 체크부분)
이미지의 css는 아래와 같습니다.

.parent {
  background-color: #2ecc71;
  width: 400px;
  height: 300px;
  position: relative;
  left: 40%;
  top: 50px;
}
.relative {
  position: relative;
  background-color: #9b59b6;
  width: 100px;
  height: 100px;
}
.absolute {
  position: absolute;
  background-color: #34495e;
  width: 100px;
  height: 100px;
}

top/right/bottom/left값이 없는데, 왜 기본값으로 100이 들어가 있는 것일까요?
absolute position을 넣고, top/right/bottom/left 값을 주지 않으면, 본인이 static일때의 위치값을 default로 넣는다는 것(예제에서는 100px)을 알 수 있습니다.

---

🐉 Conclusion

여기까지 relative와 absolute를 마칩니다. static에 대한 선행학습이 반드시 필요했습니다.
단순히 relative와 absolute만 비교하면 헷갈릴 수 밖에 없습니다. position의 fixed와 sticky도 자주 쓰이는 position인 것 같아서, 추가로 글을 쓸 예정입니다.

---

📚 Reference Link

아래 유튜브의 예제를 참고했습니다.

techsith youtube

---------- 수정 사항(필독) -----------

위 글에서 absolute는 relative인 부모에 대한 절대값이라고 하였는데, 이는 오류가 있는 설명이었습니다.

MDN공식문서에 따르면, 부모(ancestor로 보는게 더 맞을 듯)의 position이 define되어 있다면(static은 제외), 그것을 따른다고 되어있습니다.

따라서 부모가 position: absolute 이면 자식(자식 또한 position: absolute이라면)은 그것에 대한 absolute를 갖게 됩니다.

• 코드펜 예제를 확인해보시기 바랍니다.

• MDN 내용을 참고하세요.

• stackoverflow에도 해당 내용이 있습니다.