position은 문서상의 요소를 배치하는 방법을 정의한다.
position으로 요소 배치 방법을 결정하면
그 다음 top, left...로 최종 위치를 결정하며 해당 면에서 어느정도로 엘리먼트를 떨어트릴지 수치를 입력하면 된다.
position 속성은 아래와 같이 있다.
- static: 기본값으로 html문서의 일반적인 흐름에 따른다.
- reletive: 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동시킨다.
- absolute: position이 지정된 상위 요소를 기준으로 요소를 이동시킨다. 이때 요소는 문서의 흐름에서 제외된다.
- fixed: 화면을 기준으로 요소 위치를 고정한다.
코드 예시
example1 {
position: relative;
top: 50px;
left: 100px;
}
example2 {
position: absolute;
top: 50px;
left: 100px;
}
example3 {
position: fixed;
top: 50px;
left: 100px;
}
relative는 엘리먼트가 원래 있던 위치 기준으로 입력한 top과 left 수치만큼 이동시킨다.
absolute는 화면 뷰포트 기준으로 입력한 top과 left 수치만큼 이동시킨다. 단, 상위 요소에서 position을 가지고 있을 때, 해당 상위 요소 기준으로 움직이게 된다.
fixed는 화면 뷰포트 기준으로 입력한 top과 left 수치만큼 이동시키지만 스크롤이 있는 경우에도 해당 위치를 고정시킨다.
hyohyo