CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
static
요소를 일반적인 문서 흐름에 따라 배치한다. 기본값이며, top, right, left, bottom, z-index 속성이 아무런 영향을 주지 못한다.
relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left 값에 따라 적용된다.
이 요소는 다른 요소에 영향을 주지 않는다. 따라서 차지하는 공간은 static일 때와 같다.
absolute
요소를 일반적인 문서 흐름에서 제거하고 가장 가까운 조상 요소에 상대적으로 배치한다. 하지만 조상 중에 위치 지정 요소가 없다면(이 경우 부모 요소가 absolute 이든 relative 이든 상관은 없다) body 블록이 기준이 된다. 즉, position이 static이라면 계속 상위의 조상으로 지정 요소를 조정하다 모든 조상이 지정 요소가 없는 경우에 body 블록이 기준이 되는 것이다. 그 후 top, right, bottom, left 값이 위치를 지정한다. 만약 요소가 마진을 가진다면 거리에 더한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing -->
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid purple;
background: yellow;
}
.content-box {
box-sizing: content-box;
}
.content-box2 {
position: relative;
top: 30px;
left: 30px;
background-color: blue;
box-sizing: content-box;
}
.content-box3 {
box-sizing: content-box;
position: absolute;
top: 30px;
left: 30px;
background: red;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<div class="content-box2">Relative Box</div>
<div class="content-box3">Absolute Box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>
'이것 저것 공부 > CSS' 카테고리의 다른 글
| 요소의 가운데 정렬 (0) | 2021.09.01 |
|---|---|
| Position Sticky VS Fixed (0) | 2021.08.31 |
| Box-sizing (0) | 2021.08.30 |
