position은 요소를 배치하는 속성이다. position의 여러 속성값에 대해서 살펴보자.
static
- 기본값으로 따로 지정하지 않는다면 static이다.
- html을 작성한 순으로 일반적인 문서의 흐름에 따라 위치가 지정된다.
.box1,
.box2{
width: 100px;
height: 100px;
}
.box1{
background-color: pink;
}
.box2{
background-color: aqua;
position: static;
}relative
- 자기 자신을 기준으로 상대적인 위치를 나타낸다.
- 다른 콘텐츠의 위치에 영향을 미치지 않는다.
- 음수값도 가능하다. (아래 예제는 top에 음수값을 주어 박스가 겹치게 했다.)
.box2{
background-color: aqua;
position: relative;
top: -50px;
left: 50px;
}absolute
- 일반적인 문서의 흐름에서 자신을 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 조상의 위치를 기준으로 한다. static을 제외한 position 속성값을 가진 가장 가까운 조상을 가리킨다.
.parents{
position:relative;
}
.absolute{
position:absolute;
top: 50px;
left: 50px;
}위의 예제의 경우 parents라는 부모를 기준으로 하기 때문에 top에 음수값을 주지 않아도 두 개의 박스가 겹치게 된다.
fixed
- 일반적인 문서의 흐름에서 자신을 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 뷰포트를 기준으로 위치를 지정한다.
- 스크롤을 이동해도 같은 위쳉 고정된다
- header나 top 버튼 등에 사용할 수 있다.
.fixed{
position: fixed;
bottom: 5px;
right: 5px;
}sticky
- 조상의 위치를 기준으로 한다. static을 제외한 position 속성값을 가진 가장 가까운 조상을 가리킨다.
- static과 fixed의 특징을 모두 가지고 있다.
.sticky{
position: sticky;
top: 0; /*원하는 y 좌표*/
}위의 예제의 경우 부모 요소의 top : 0인 지점에 sticky를 준 요소가 고정된다. 따라서 스크롤 하는 동안에 해당 위치에 고정된다.
absolute와 sticky를 쓸 때는 가장 가까운 반드시 부모나 조상 요소에 static을 제외한 속성값을 지정해야함을 잊지 말자!
