CSS에서 필수적인 속성인 position 기본 사용법에 대해서 정리 해보려고 한다.
참고사이트: https://developer.mozilla.org/ko/docs/Web/CSS/position
요소를 일반적인 문서흐름에 따라 배치하며, top, left, right, bottom속성이 영향을 주지 못한다.
❗️주의!! position: static인 부모태그는 abosolute의 위치지정조상요소가 되지 못한다! ❗️이는 static이 default값이기 때문인것으로 사료된다. ❗️그러므로 조상요소의 위치는 바꾸지 않고, position속성만 넣고 싶다면 relative이용하자!
요소를 일반적인 문서흐름에서 제거하며, 페이지 레이아웃에서 공간자체도 배정하지 않는다. 단, 가장 가까운 위치지정 조상요소를 기준으로 배치하게 되며, 최종 위치는 top, left, right, bottom속성이 결정하게 된다. ❗️단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼게 된다.
❗️레이아웃에서 공간자체도 배정되지 않기 때문에, 새로운 쌓임 맥락이 생기게 된다.(z-index가 auto가 아닐때)
요소를 일반적인 문서흐름에 따라 배치하며, 자기 자신을 기준으로 top, left, right, bottom속성에 따라 상대값(offset)을 적용한다. 이 상대값(offset)은 다른 요소에 영향을 주지 않는다. 그렇기 때문에, 레이아웃에서 요소가 차지하는 공간은 static일때와 동일하게 된다.