1.4 absolute
- 요소를 문서의 일반적인 흐름에서 제거하고, 가장 가까운 position이 지정된 조상 요소를 기준으로 절대적인 위치에 배치할 수 있게 해줌
- 만약, 조상요소에 positon의 종류가 하나도 설정되어있지 않다면,
브라우저 창(body)이 기준이 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Absolute</title>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #333;
margin: 50px auto;
}
.absolute-box {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #4caf50;
color: white;
padding: 10px 15px;
border-radius: 5px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
부모 박스
<div class="absolute-box">절대 위치 박스</div>
</div>
</body>
</html>
'Frontend' 카테고리의 다른 글
| day05_transform (0) | 2025.04.08 |
|---|---|
| day05_미디어 쿼리 (1) | 2025.04.08 |
| day04_positon_(2) fixed (0) | 2025.04.04 |
| day04_position_(1) relative (0) | 2025.04.04 |
| day04_box (0) | 2025.04.04 |