[CSS] 부모 엘리먼트를 기준으로 position: absolute의 offset 주기

오랜만에 글을 작성해봅니다. 그동안 다양한 일들이 있어서 약 2주간 글이 끊겨버렸네요..

시간이 늦었지만 무엇이라도 글을 작성해야겠다는 생각이 들어 이렇게 블로그에 다시 들어오게 되었습니다 :)

 

이번 포스팅에서는 부모 엘리먼트를 기준으로 position: absolute를 사용하는 방법에 대해서 알아보려고 합니다!

 

목차

---

0. CSS의 position 속성

CSS의 position 속성은 HTML과 CSS를 처음 입문하면 배우는 아주 기초적인 내용 중 하나입니다.

하지만 시간이 흐르다보면 무뎌져서 이 내용도 까먹기 마련이더라구요.

 

CSS의 position 속성에는 총 5가지가 있습니다.

기본값인 static과 함께 absolute, relative, fixed, sticky가 존재합니다.

 

• static : Default값으로, 다른 태그와의 관계에 의해 자동으로 배치되고 left, right, top, bottom 속성을 부여할 수 없습니다.
• absolute : 절대 좌표와 함께 위치를 지정할 수 있습니다.
• relative : 기존 위치를 기준으로 좌표를 설정할 수 있습니다.
• fixed : 스크롤과 관계 없이 브라우저의 (0,0) 좌표를 기준으로 좌표를 설정할 수 있습니다.
• sticky: 평소에는 static과 같은 상태이지만, 스크롤 위치(부모 요소)에 따라 화면에 고정할 수 있게 만들어주는 속성입니다. top, left와 같은 위치값을 지정하면 적용됩니다. (IE에서의 사용을 위해서는 polyfill 과정이 필요합니다!)

 

사용법은 아주 당연하면서도 간단합니다.

sticky가 조금 특이한데, 이번 포스팅의 목적은 sticky가 아닌 absolute와 relative에 맞춰져 있으므로 이정도로만 보고 넘어가도록 하겠습니다.

.staticContainer { position: static }
.absoluteContainer { position: absolute }
.relativeContainer { position: relative }
.fixedContainer { position: fixed }
.stickyContainer { position: sticky }

 

---

1. position: absolute의 특징

먼저 absolute의 가장 큰 특징은 부모 엘리먼트에 종속되지 않는다는 점입니다.

원한다면 뷰포트(사용자에게 보여지는 영역)의 어느 곳에라도 요소를 배치시킬 수 있습니다. (보통 특정 위치에 겹쳐서 놓고 싶을 때 사용합니다)

 

단, 여기서 한 가지 조건이 붙습니다.

 

부모 엘리먼트를 포함한 상위 엘리먼트의 요소중에 positive 속성이 relative인 엘리먼트가 있다면 relative인 엘리먼트들 중에서 현재 요소에 가장 가까운 엘리먼트의 내부에서만 요소를 자유롭게 배치시킬 수 있습니다.

 

offset 속성(top, left, bottom, right)도 해당 상위 엘리먼트를 기준으로 적용됩니다.

 

1.0. 부모 엘리먼트가 static

부모 엘리먼트의 속성이 static인 상태에서 자식 엘리먼트의 속성을 absolute인 경우를 생각해보겠습니다.

top: 0px, left: 0px를 줬으니 당연히 뷰포트에서 가장 왼쪽 위에 자식 2가 들어가겠죠?

 

See the Pen Untitled by Ssoco (@alittlekitten) on CodePen.

 

1.1. 부모 엘리먼트가 relative

부모 엘리먼트 속성이 relative라면 어떨까요?

해당 부모의 맨 왼쪽 위에 자식 2가 들어가게 됩니다. 신기하죠?!!

 

 

See the Pen Untitled by Ssoco (@alittlekitten) on CodePen.

 

---

2. 실제 적용

저는 만들고 있는 타이머 애플리케이션에서 미리 선택한 div태그의 범위 안에서 위치지정을 해 주고 싶어서 이 특징을 사용했습니다.

부모 엘리먼트의 포지션을 relative로 설정하고, 연월일을 출력하는 부분의 속성을 absolute로 설정했습니다.

 

좌 : 부모 엘리먼트 / 우 : 자식 엘리먼트

 

부모 엘리먼트의 최상단에 위치시키기 위해서 top: 0px를 줬습니다.

그랬더니 무사히 원하는대로 연월일이 들어간 모습을 보실 수 있습니다!!

 

 

---

3. 참고자료

position - CSS: Cascading Style Sheets | MDN

[CSS] Absolute Position - 자유로운 엘리먼트 배치