position 을 어떻게 사용하는지 알려주세요
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 등의 속성이 요소를 배치할 최종 위치를 결정한다.
1. static
요소를 일반적인 문서에 흐름에 따라 배치한다. top, right, bottom, left 속성에 아무런 영향을 주지 않는다. position 속성을 부여하지 않으면 기본 값으로 설정되어 있다.
2. relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 동작합니다. 단, relative는 다른 요소에 영향을 주지 않습니다. 따라서, 페이지 레이아웃 요소가 차지하는 공간은 static일 때와 같다.
3. absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 대신, 가장 가까운 부모 요소에 상대적으로 배치한다. 단, 부모 요소가 position:static 외의 값을 부여하지 않으면 그의 부모로 올라가고 타고타고 올라가면 body태그까지 타고 올라간다. 최종 위치는 position: static 외의 값을 부여한 부모 요소에서 top, right, bottom, left 값을 지정한다.
4. fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간을 배정하지 않는다. 대신 븊트의 초기 컨테이너의 기준으로 삼아 배치한다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. 그에 따른 최종 위치는 top, right, bottom, left 값으로 지정한다.
5. sticky
요소를 일반적인 문서 흐름에 따라 배치하고 스크롤 되는 조상과 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left에 따라 값을 적용한다. 다른 요소에는 영햐을 주지 않는다.
