▷Relative position
요소를 Normal Flow에 따라 배치한다
자기 자신을 기준으로 이동한다
요소가 차지하는 공간은 static일 때와 같다
Relative position은 상대적인 위치이다
상하좌우 4방향에 대해서 움직이지 않으면, 그대로 있다.
본인의 static의 위치를 기준으로 움직이는 것이다.
static을 기준으로 100px, 100px 움직이는 것이기 때문에
Relative는 본인의 과거 위치를 버리지 않는다
| 코드 | 결과 | |
| 아무것도 하지 않은 static 상태 |  |
 |
| position을 relative로 바꿔주었다. |  |
 |
| top에 100px을 넣어주었다. |  |
 영역 관점에서 생각을 해야한다. top 100px이라는 건, 위쪽에 100px만큼 준다는 뜻이다. 결국 얘가 움직이는 방향은 아래가 된다. |
| top에 100px, left에 100px을 넣어주었다. |  |
 |
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position</title>
<style>
* {
box-sizing: border-box;
}
body {
height: 1500px;
}
.container {
/* position: relative; */
height: 300px;
width: 300px;
border: 1px solid black;
}
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
.static {
/* position: static; */
background-color: lightcoral;
}
.absolute {
/* position: absolute; */
background-color: lightgreen;
/* top: 100px; */
/* left: 100px; */
}
.relative {
position: relative;
background-color: lightblue;
top: 100px;
left: 100px;
}
.fixed {
/* position: fixed; */
background-color: gray;
/* top: 0; */
/* right: 0; */
}
</style>
</head>
<body>
<div class="container">
<div class="box static">Static</div>
<div class="box absolute">Absolute</div>
<div class="box relative">Relative</div>
<div class="box fixed">Fixed</div>
</div>
</body>
</html>'WEB > CSS_ concepts' 카테고리의 다른 글
| Fixed Position (0) | 2024.03.07 |
|---|---|
| Absolute position (0) | 2024.03.07 |
| static position (0) | 2024.03.07 |
| [CSS] CSS Position (0) | 2024.03.07 |
| [CSS] Box Model _ 구성요소 / 개발하기 전에 ♥border-box(o)♥ 설정을 하자. (0) | 2024.03.07 |