position 속성은 요소들을 어떻게 배치할지 정하는 속성입니다.
텍스트나 이미지를 원하는 위치에 쉽고 자유롭게 배치할 수 있죠. WOW 😮 👏 👏 👏
하지만 position을 이해하지 못하는 상태에서 CSS를 수정한다면 예상치 못하게 레이아웃이 이상해지거나 망가질 수 있습니다. 위에 meme 처럼요 🥶
앞서 말했듯이 position 속성은 요소를 원하는 위치에 배치하기 위해 사용되는 속성 입니다.
top
,bottom
,left
,right
속성이 요소를 배치할 최종 위치를 결정합니다.float
와 달리 레이아웃이 붕괴되는 현상이 일어나지 않기 때문에 사용하기에 비교적 쉽습니다. 😉
모든 요소의 기본 position 값으로 요소를 일반적인 문서 흐름에 따라 배치합니다.
이동의 기준점:
자기 자신이 원래 있던 자리
top
,bottom
,left
,right
값에 따라 자기 자신을 기준으로 이동합니다.
이동의 기준점:
position 값이 static이 아닌 요소들 중 기준점을 삼고싶은 대상을 선택 가능 👌
top
,bottom
,left
,right
값에 따라 대상을 기준으로 이동합니다.번외 )
position
absolute
와fixed
를 주면 인라인 블록으로 변합니다.
하지만relative
는 이 값을 준다고 해서 인라인블록 변하지 않고,
고유의display
속성을 유지합니다.
이동의 기준점:
뷰포트(viewport)를 기준으로 이동합니다.
top
,bottom
,left
,right
값에 따라 view(뷰포트)를 기준으로 이동합니다.단, 요소의 조상 중 하나가
transform
,perspective
,filter
속성 중 어느 하나라도none
이 아니라면,
뷰포트
대신 그 조상을 컨테이닝 블록(가장 가까운 블록 레벨 조상)으로 삼습니다. (perspective
와filter
의 경우 브라우저별로 결과가 다름에 유의하세요!)
아직 지원하는 브라우저가 많지 않기 때문에 사용하지 않는 경우가 많다고 하여 pass 합니다