반응형
CSS의 position 속성은 HTML 요소를 웹 페이지에서 어떻게 배치할지를 지정하는 속성입니다.
이 속성은 주로 레이아웃을 제어하고 요소의 위치를 조정하는 데 사용됩니다.
static: 이 값은 기본값이며, 요소들은 문서 흐름에 따라 배치됩니다. top, right, bottom, left 속성은 이 값에 영향을 주지 않습니다.
relative: 요소는 자신의 기본 위치를 기준으로 이동합니다. 다른 요소들은 요소가 이동한 위치를 차지하지 않고 배치됩니다.
absolute: 요소는 가장 가까운 부모 요소 중 position 속성이 static이 아닌 것을 기준으로 위치가 결정됩니다. 다른 요소들은 이 위치를 무시하고 배치됩니다.
fixed: 요소는 뷰포트(브라우저 창)를 기준으로 위치가 결정됩니다. 스크롤해도 요소의 위치가 변하지 않습니다.
sticky: 요소는 스크롤되는 동안 지정된 위치에 고정됩니다. 특정 스크롤 위치까지는 relative와 같이 동작하고, 그 이후에는 fixed와 같이 동작합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.relative-box {
position: relative;
top: 20px;
left: 30px;
background-color: #ffcc00;
width: 100px;
height: 100px;
}
.absolute-box {
position: absolute;
top: 50px;
left: 50px;
background-color: #ff6666;
width: 100px;
height: 100px;
}
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
background-color: #3399ff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h2>Position 예제</h2>
<div class="relative-box">
Relative Box
<div class="absolute-box">Absolute Box</div>
<div class="fixed-box">Fixed Box</div>
</div>
</body>
</html>Position 예제
Relative Box
Absolute Box
Fixed Box
반응형
'CSS' 카테고리의 다른 글
| CSS padding, margin 차이점 (0) | 2023.09.13 |
|---|
댓글