CSS position: relative, position: absolute 관계
absolute와 relative는 CSS의 position 속성에서 중요한 관계를 형성한다. 이 둘의 관계를 이해하면 레이아웃을 더 효율적으로 구성할 수 있다.
1. 기본 개념
position: relative: 요소가 문서 흐름에 따라 배치되지만, 그 요소의 원래 위치를 기준으로 이동할 수 있다. 이 요소는 다른 요소의 기준점이 된다.position: absolute: 요소가 문서 흐름에서 벗어나 가장 가까운position이 설정된 조상 요소를 기준으로 위치한다. 조상이 없으면<html>문서를 기준으로 삼는다.
2. 상대적 위치와 절대적 위치
relative요소:relative로 설정된 요소는 그 위치가 기준이 되므로, 그 안에 있는absolute요소는 이 요소를 기준으로 하여 위치를 조정한다.absolute요소:absolute로 설정된 요소는relative요소의top,right,bottom,left속성에 따라 위치가 결정된다
3. relative와 absolute의 관계 예시
3.1 기본 예시: relative와 absolute
<div class="relative-box">
<div class="absolute-box"></div>
</div>.relative-box {
position: relative;
width: 300px;
height: 300px;
background-color: lightblue;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: coral;
}
설명:
- relative-box: 이 요소는 position:relative로 설정되었으며, 크기가 300x300이다. 이 요소가 기준점이 된다.
- absolute-box: 이 요소는 relative-box의 자식 요소이며, position: absolute로 설정되어 top: 50px, left: 50px의 위치에 배치된다.
3.2 absolute 요소가 다른 relative 요소를 가질 때
<div class="relative-box">
<div class="inner-relative-box">
<div class="absolute-box"></div>
</div>
</div>.relative-box {
position: relative;
width: 300px;
height: 300px;
background-color: lightblue;
}
.inner-relative-box {
position: relative;
width: 150px;
height: 150px;
background-color: lightgreen;
}
.absolute-box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: coral;
}
설명:
- relative-box: 바깥쪽 박스로, 이전과 동일하게 position: relative를 가지고 있다.
- inner-relative-box: 안쪽 박스는 새롭게 추가된 relative 요소로, absolute-box는 이 요소를 기준으로 위치하게 된다.
- absolute-box: top: 20px, left: 20px 설정에 따라 inner-relative-box의 안쪽에서 이동한다.
3.3 relative 요소가 없을 때
만약, relative 요소가 없으면 absolute 요소는 가장 가까운 position이 설정된 조상을 찾고, 없으면 body를 기준으로 삼는다.
<div class="absolute-box"></div>.absolute-box {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: coral;
}
설명: 이 경우 absolute-box는 body를 기준으로 하여 위치하게 된다.
결론:
- absolute는 가장 가까운 position: relative (또는 absolute, fixed)를 기준으로 배치된다.
- relative는 자신의 원래 위치를 유지하면서 이동 가능하며, absolute 자식 요소의 기준점이 된다.
