position
- position 프로퍼티를 사용하면 html 코드와 상관없이 그리고 싶은 어느 위치에에나 요소를 그릴 수 있다.
1. static
position: static;
- 문서의 흐름에 맞추어 배치하며 left, top 속성 지정 불가능
2. relative
position: relative;
- 이전 요소에 자연스럽게 배치하되 위치 지정 가능
- 자신의 원래 위치에서 원하는 위치로 이동시키고자 할 때 사용한다.
3. absolute
position: absulute;
- 특정 부모에 대해 절대적으로 움직이게 된다. 원하는 위치를 지정해 배치하며 left, top, right, bottom 속성으로 네 모서리에서 얼마나 떨어져 있는지 지정한다.
- block element 요소를 position: absolute; 로 지정시 가로크기가 부모 너비만큼 전부 차지하지 않고 inline-element처럼 내용의 크기만큼만 너비가 지정된다.
- position: static; 을 제외한 가장 첫 번째로 만나는 ancestor를 기준으로 삼는다.
- 문서의 왼쪽 위에서 부터 배치 기준이 적용된다.
- relative 요소가 상위 요소로 있을 경우 이를 기준으로 배치된다.
- 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다.
4. fixed
position: fixed;
- 부모요소가 아닌 브라우저 창 기준이며 눈에 보이는 브라우저 화면 크기만틈 화면 내에서만 움직인다.
- 상위 요소의 영향을 받지 않고 배치된다.
- 뷰포트에 상대적으로 위치가 지정되며 페이지가 스크롤 되더라도 늘 같은 곳에 위치한다.
- relative와 마찬가지로 top, right, bottom, left 프로퍼티가 사용된다.
