▶ Absolute position
| 요소를 Normal Flow에서 제거한다 가장 가까운 relative 부모 요소를 기준으로 이동한다 문서에서 요소가 차지하는 공간이 없어진다 |
나의 과거 위치를 다 버리겠다
집을 나갔기 때문에, 본인이 가졌던 영역을 버린다
그 영역이 없어졌기 때문에, 위로 올라가게 된 것
그래서 Absolute는 레이아웃 자체가 깨질 위험이 있다.
결국 이동하려면 새로운 기준점을 찾아야한다.
이거는 부모를 찾아간다 (하지만, 그 부모가 static이면 안됨)
그래서 Absolute가 움직일 수 있는 부모 영역을 잘 설정해야한다.
부모에서 position : relative; 로 두면 된다.
그래서 Absolute를 움직일 때는 움직일 수 있는 영역을 잘 설정해야한다.
설계 자체를 잘 해야함.
| 코드 | 적용한 후 | |
| 1번 relative가 활성화되어 있는 상태에서 시작 |
  |
 |
| 2번 absolute 상태 |
  |
 밑에 있는 애들이 갑자기 위로 올라옴 |
| 3번 top 100px 적용 |
   |
 |
4번 top 100px 적용 + left 100px 적용 |
   |
 |
2번)
여기서 애들이 갑자기 위로 올라온 이유는?
absolute가 원래 본인이 가지고 있던 초록색 영역을 다 버렸기 때문에
밑에 있던 애들이 단체로 올라오게 된 것이다.
3번)
absolute도 이동하려면 새로운 기준점을 찾아야한다.
누구한테 찾아가냐면, static이 아닌 부모를 찾아간다.
absolute가 움직이는 영역을 설정할 부모태그를 잘 설정해야한다.
여기서는 absolute의 부모를 container로 잡았다.
그러면 absolute가 이 부모를 기준점으로 잡으려면 부모에게 position relative를 줘야한다.
그러면 이제 absolute의 시작점은 좌측 상단이 된다.
더보기
<!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>
- 추가 연습
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.card {
/* position: relative; */
width: 300px;
height: 200px;
border: 1px solid black;
}
.card-content {
padding: 10px;
}
.badge {
/* position: absolute; */
/* top: 0; */
/* right: 0; */
background-color: red;
color: white;
padding: 5px 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="card-content">
<h3>Card Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="badge">New</span>
</div>
</div>
</body>
</html>'WEB > CSS_ concepts' 카테고리의 다른 글
| sticky position (0) | 2024.03.07 |
|---|---|
| Fixed Position (0) | 2024.03.07 |
| Relative position (0) | 2024.03.07 |
| static position (0) | 2024.03.07 |
| [CSS] CSS Position (0) | 2024.03.07 |