position: relative; 📍 자기 자리를 지키는 기준
position: relative;는 이름 그대로 상대적인 위치를 지정하는 속성이다.
- 특징: 요소를 일반적인 문서 흐름(Document Flow)에 따라 배치한다.
top,left등으로 위치를 조정해도, 원래 자신이 있던 공간은 그대로 차지하고 있다. - 핵심 역할: 자식 요소가 될
position: absolute;의 기준점(Reference Point) 역할을 한다. 즉, 자식 요소를 특정 영역 안에 가두고 싶을 때 부모 요소에 이 속성을 부여한다.
position: absolute; 👻 기준을 찾아 떠나는 자유
position: absolute;는 절대적인 위치를 지정하며, 이름처럼 자유로운 특징을 가진다.
- 특징: 요소를 일반적인 문서 흐름에서 완전히 제거한다. 따라서 해당 요소가 원래 차지하던 공간은 사라지고, 다른 요소들이 그 공간을 채우게 된다.
- 핵심 역할: 가장 가까운 조상 요소 중
position속성이relative,absolute,fixed인 요소를 찾아, 그 조상을 기준으로 자신의 위치를 정한다. 만약 기준이 될 조상이 없다면 최상위 요소인<html>을 기준으로 삼는다.
예제
relative와 absolute는 함께 사용할 때 진정한 시너지를 낸다. 부모에게 relative를, 자식에게 absolute를 부여하는 것은 CSS 레이아웃의 정석과도 같은 패턴이다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Position 예제</title>
<style>
.relative-container {
position: relative; /* 자식 요소의 기준이 됨 */
width: 300px;
height: 300px;
background-color: lightblue;
border: 2px solid blue;
}
.absolute-child {
position: absolute; /* 부모(relative-container)를 기준으로 위치를 찾음 */
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: lightcoral;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="relative-container">
상대 위치 컨테이너 (기준점)
<div class="absolute-child">
절대 위치 자식
</div>
</div>
</body>
</html>동작 원리
- 기준점 설정:
.relative-container에position: relative;를 부여하여 자식 요소들이 위치를 잡을 수 있는 기준점으로 만든다. 이 컨테이너 자체는 일반적인 문서 흐름에 따라 배치된다. - 기준점 탐색 및 배치:
.absolute-child는position: absolute;이므로 문서 흐름에서 벗어나 자신의 기준이 될 부모를 찾는다. 가장 가까운 부모인.relative-container가position: relative;이므로, 이 컨테이너를 기준으로 삼는다. - 최종 위치:
.absolute-child는.relative-container의 왼쪽 상단 모서리로부터top: 50px;,left: 50px;떨어진 곳에 자리를 잡게 된다.
결론
position: relative;: "자식들아, 나를 기준으로 삼아라!"라고 선언하며 자신의 자리는 지킨다.position: absolute;: "기준이 될 부모님이 어디 계신가요?"라고 외치며 문서 흐름을 떠나 자유롭게 배치된다.
'프레임 워크 > html&css' 카테고리의 다른 글
| [CSS] 블록 요소와 인라인 요소, 그리고 px, vw, vh 단위에 대한 정리 (0) | 2024.07.08 |
|---|---|
| [CSS] FLEX 속성 정리 (0) | 2024.07.08 |
| [CSS] Box-sizing 정리 (0) | 2024.07.08 |