3.1 position: relative
CSS의 상대적 포지셔닝은 문서 흐름에서 요소의 원래 위치를 기준으로 이동할 수 있게 해줘. position: relative을 사용할 때 요소는 일반적인 흐름에서 그 자리를 유지하지만 top, right, bottom 및 left 속성을 통해 이동할 수 있어. 이 속성들은 요소를 그 원래 위치를 기준으로 이동시킬 수 있게 해주는 거야.
상대적 포지셔닝의 기본 원칙
상대적 포지셔닝 (position: relative) 사용 시, 요소는 문서 흐름에서 그 원래 위치에서 이동해. 이 이동은 오직 요소 자체에만 영향을 주고, 다른 요소들은 그 자리에 그대로 남아있어, 요소가 이동되지 않은 것처럼 말이야. 그래서 요소들이 서로 겹치거나 추가적인 시각적 여백을 만드는 효과들을 만들 수 있어.
문법:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
여기서:
top: 요소를 일반 위치에서 아래로 이동시켜right: 요소를 일반 위치에서 왼쪽으로 이동시켜bottom: 요소를 일반 위치에서 위로 이동시켜left: 요소를 일반 위치에서 오른쪽으로 이동시켜<value>: CSS에서 허용 가능한 길이 값 (px,%,em등)이 될 수 있어
3.2 top 속성
top 속성은 요소를 그 원래 위치에서 아래로 이동시켜.
top 사용 사례:
CSS
.relative-top {
position: relative;
top: 20px; /* 요소를 20픽셀 아래로 이동시킴 */
}
사용 예시:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
HTML
<div class="container">
<div class="box static-box">이것은 일반 블록이야</div>
<div class="box relative-top">이 블록은 20px 아래로 이동할 거야.</div>
<div class="box static-box">이것은 일반 블록이야</div>
</div>
3.3 right 속성
right 속성은 요소를 그 원래 위치에서 왼쪽으로 이동시켜.
right 사용 사례:
CSS
.relative-right {
position: relative;
right: 20px; /* 요소를 20픽셀 왼쪽으로 이동시킴 */
}
사용 예시:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">이것은 일반 블록이야</div>
<div class="box relative-right">이 블록은 20px 왼쪽으로 이동할 거야.</div>
<div class="box static-box">이것은 일반 블록이야</div>
</div>
3.4 bottom 속성
bottom 속성은 요소를 그 원래 위치에서 위로 이동시켜.
bottom 사용 사례:
CSS
.relative-bottom {
position: relative;
bottom: 20px; /* 요소를 20픽셀 위로 이동시킴 */
}
사용 예시:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">이것은 일반 블록이야</div>
<div class="box relative-bottom">이 블록은 20px 위로 이동할 거야.</div>
<div class="box static-box">이것은 일반 블록이야</div>
</div>
3.5 left 속성
left 속성은 요소를 그 원래 위치에서 오른쪽으로 이동시켜.
left 사용 사례:
CSS
.relative-left {
position: relative;
left: 20px; /* 요소를 20픽셀 오른쪽으로 이동시킴 */
}
사용 예시:
CSS
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
HTML
<div class="container">
<div class="box static-box">이것은 일반 블록이야</div>
<div class="box relative-left">이 블록은 20px 오른쪽으로 이동할 거야.</div>
<div class="box static-box">이것은 일반 블록이야</div>
</div>
3.6 인접 요소와의 상호작용
position: relative을 사용한 요소는 문서의 일반 흐름에 남아있어, 이는 요소가 이동되지 않은 것처럼 그 공간을 차지한다는 것을 의미해. 이렇게 하면 다른 요소들의 위치를 변경하지 않으면서 요소를 이동할 수 있어.
사용 예시:
CSS
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
HTML
<div class="container">
<div class="box box1">요소 1 (아래로 이동)</div>
<div class="box box2">요소 2 (오른쪽으로 이동)</div>
<div class="box">요소 3 (일반 위치)</div>
</div>
코드 설명:
-
.box1: 요소가 20픽셀 아래로 이동했지만, 그 자리는 원래 흐름에 남아있어, 이는 다른 요소들이 원래 위치를 기준으로 배치된다는 것을 의미해 -
.box2: 요소가 20픽셀 오른쪽으로 이동했지만, 그 자리는 원래 흐름에 남아있어
GO TO FULL VERSION