CSS Position
- 문서 상에서 요소를 배치하는 방법을 지정한다.
- static : 모든 태그의 기본 값(기준 위치)
- 일반적인 요소의 배치 순서에 따른다. (좌측 상단)
- 부모 요소 내에서 배치될 때는 부모 요소의 위치를 기준으로 배치된다.
- 아래는 좌표 프로퍼티(top, bottom, left, right)를 사용하여 이동이 가능(음수 값도 가능)
- relative
- absolute
- fixed
static
div {
height: 100px;
width: 100px;
background-color: #9775fa;
color: black;
line-height: 100px;
text-align: center;
}
relative
relative : 상대 위치
- 자기 자신의 static 위치를 기준으로 이동
- 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
.relative {
position: relative;
top: 100px;
left: 100px;
}
absolute
absolute : 절대 위치
- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않는다.
- static이 아닌 가장 가까이 있는 부모/조상 요소를 기준으로 이동(없는 경우 body에 붙는 형태)
.parent {
position: relative;
}
.absolute-child {
position: absolute;
top: 50px;
left: 50px;
}
fixed
fixed : 고정 위치
- 요소를 일반적인 문서 흐름에서 제거 후 레이아웃에 공간을 차지하지 않는다.
- 부모요소와 관계없이 viewpoint를 기준으로 이동
- 스크롤 시에도 항상 같은 곳에 위치한다.
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
absolute vs relative
<body>
<div class="parent">
<div class="absolute">형</div>
<div class="sibling">동생</div>
</div>
<hr>
<div class="parent">
<div class="relative">형</div>
<div class="sibling">동생</div>
</div>
</body><style>
/* 공통 스타일링 */
div {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
}
.parent {
position: relative;
width: 300px;
height: 300px;
}
/* 차이점 확인해보기 */
.absolute{
position: absolute;
top: 100px;
left: 100px;
background-color: crimson;
}
.sibling{
background-color: deepskyblue;
}
.relative {
position: relative;
top: 100px;
left: 100px;
background-color: crimson;
}
</style>
'Web > css' 카테고리의 다른 글
| CSS Flexbox (0) | 2021.08.16 |
|---|---|
| CSS Float (0) | 2021.08.16 |
| CSS Display (0) | 2021.08.16 |
| CSS Box model (0) | 2021.08.16 |
| CSS 상속과 단위 (0) | 2021.08.16 |