[CSS 기초-2] position - relative, absolute, fixed

1. 개요

html 태그나 element 등을 사용하면 순서대로 작성됩니다.
그러나 CSS position이라는 property를 사용하면 코드 순서와 상관 없이 원하는 곳에 그려낼 수 있습니다.

예를 들어, 상단의 메뉴바는 스크롤을 내려도 항상 떠다니는 기능이 이를 활용한 것입니다.
또한, text 박스 안에 겹쳐서 다른 이미지나 박스가 들어간 것도요!

가장 많이 사용하는 postion은

- relative
- absolute
- fixed

세 가지가 있습니다.

각각이 어떤 역할을 하는지 살펴보겠습니다.

2. relative

relative(사전적 의미로 '상대적인')은 자체의 특별한 역할은 하지 않습니다.
다만, position의 위치를 조정하기 위해서는 이 position property 선언이 반드시 필요합니다.
top, right, bottom, left(위, 오른쪽, 아래, 왼쪽)으로 원하는 만큼 조절할 수 있습니다.
(이래서 상대적이라는 뜻으로 사용하나 봅니다.)

아래와 같은 예시로 확인 해보겠습니다.

.relative {
  position: relative;
}
.top-20 {
  top: -20px; /* 상단조절 */
  left: 30px; /* 왼쪽조절 */
}

<position의 relative를 활용한 예>

div tag를 그냥 선언한 div가 있고(첫 번째 상자)
div에 relative class만 선언한 div.relative가 있고(두 번째 상자)
div에 relative class를 선언하고 위치 조절한 class까지 선언한 top-20를 적용한 상자가 있습니다.(마지막)

기존 html 같은 경우 overlay가 되지 않았을텐데 겹쳐집니다!
기존 있어야 할 위치로 부터 -20px (코드 주석에 상단조절)
마찬가지로 기존의 좌측으로 부터 30px(코드 주석에 왼쪽조절)
로 이동하였기 때문입니다.

3. absolute

absolute(사전적 의미로 '절대적인')는 어떤 의미일까요?
바로 html에 position이 선언된 부모로 부터 절대적이라는 뜻입니다.

부모중에 fixed, absolute, relative한 position의 경우에 적용됩니다.
일반적으로 absolute를 사용하는 경우 부모의 position을 relative로 주어 사용한다고 합니다.

예시를 보겠습니다.

p {
  margin: 0;
  background-color: yellow;
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

<position의 absolute를 활용한 예>

초록색 박스는 조금전의 relative한 div를 활용합니다.
노란색 박스는 absolute position을 활용한 박스입니다.
이 노란색 박스는 div.relative와 부모-자식 관계입니다.(특별히 선언하지 않아도 하위태그이면 적용)

특이한 점은 p tag는 block-element이기 때문에 한 줄을 전부 차지해야 합니다.
그러나 여기서 노란색 박스는 딱 text만큼 공간을 차지합니다.(이런 형태를 inline-element라고 합니다)
이유는 absolute position을 갖게 되면 block의 size만큼 공간을 차지하기 때문입니다.

본론으로 돌아와 어떻게 우측하단에 absolute box가 자리 했을까요?
코드를 보면, right:0은 오른쪽으로 0만큼 떨어졌다는 겁니다.
그렇다면 바닥에 딱 붙었기 때문에 bottom 값은?..

그렇습니다. bottom:0; 이 적용되어 바닥으로 부터 0 size 만큼 떨어졌습니다.

4. fixed

마지막으로 fixed 입니다.
가장 유추하기가 쉬운 단어인것 같습니다.
고정 되었다는 뜻이지요.

또한, absolute와 달리 relative position을 가진 부모가 필요하지 않습니다.
어떤 특정 위치에 고정만 하면 되기 때문이죠!

쇼핑을 하다가 엄청나게 강조된 글자로 그것도 계속 따라다니는 글자를 보신적이 있을 수도 있습니다.
이렇게요.

fixed의 예시인데 스크롤을 내려도 "오늘만 할인!!"이라는 박스가 계속 쫓아 다닙니다.

.coupon {
  position: fixed;
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}

위 예시의 간단한 css 코드 입니다.
right: 0; 의 문구는 오른쪽에서 0만큼 떨어져 있다는 뜻입니다.
bottom도 그렇지요.

적용되는 떨어지는 size은 absolute와 동일하다고 보면 됩니다.
다만, 브라우저인지와 relative box와의 차이지요.