position 속성 가볍게 살펴보기 (feat. relative, absolute, fixed)

summerlee·2022년 9월 4일
0

TIL

목록 보기
2/39

position 속성은 요소들을 어떻게 배치할지 정하는 속성입니다.
텍스트나 이미지를 원하는 위치에 쉽고 자유롭게 배치할 수 있죠. WOW 😮 👏 👏 👏 
하지만 position을 이해하지 못하는 상태에서 CSS를 수정한다면 예상치 못하게 레이아웃이 이상해지거나 망가질 수 있습니다. 위에 meme 처럼요 🥶


position


앞서 말했듯이 position 속성은 요소를 원하는 위치에 배치하기 위해 사용되는 속성 입니다.
top , bottom , left , right 속성이 요소를 배치할 최종 위치를 결정합니다. float와 달리 레이아웃이 붕괴되는 현상이 일어나지 않기 때문에 사용하기에 비교적 쉽습니다. 😉

1. static


모든 요소의 기본 position 값으로 요소를 일반적인 문서 흐름에 따라 배치합니다.

2. relative


이동의 기준점:
자기 자신이 원래 있던 자리
top , bottom , left , right 값에 따라 자기 자신을 기준으로 이동합니다.

3. absolute


이동의 기준점:
position 값이 static이 아닌 요소들 중 기준점을 삼고싶은 대상을 선택 가능 👌
top , bottom , left , right 값에 따라 대상을 기준으로 이동합니다.

번외 )
position absolutefixed를 주면 인라인 블록으로 변합니다.
하지만 relative는 이 값을 준다고 해서 인라인블록 변하지 않고,
고유의 display 속성을 유지합니다.

4. fixed


이동의 기준점:
뷰포트(viewport)를 기준으로 이동합니다.
top , bottom , left , right 값에 따라 view(뷰포트)를 기준으로 이동합니다.

단, 요소의 조상 중 하나가
transform , perspective , filter 속성 중 어느 하나라도 none 이 아니라면,
뷰포트 대신 그 조상을 컨테이닝 블록(가장 가까운 블록 레벨 조상)으로 삼습니다. (perspectivefilter 의 경우 브라우저별로 결과가 다름에 유의하세요!)

5. sticky ❌


아직 지원하는 브라우저가 많지 않기 때문에 사용하지 않는 경우가 많다고 하여 pass 합니다

profile
완벽하지 않아도 기록하려고 노력하기 😅

0개의 댓글