[Day 3] position 속성 - relative, absolute, fixed

📌 Position 속성

---

position 속성은 요소의 위치를 정의한다. top, bottom, left, right 속성과 함께 사용하여 위치를 지정한다.

position 속성의 값:

• position: static;(기본 값, 이동불가)
• position: relative;(상대 위치)
• position: absolute;(절대 위치)
• position: fixed;(고정 위치)

🎯 static 기본값

거의 모든 요소의 기본값이며 페이지의 정상적인 흐름에 따라 요소를 설정합니다. 정적 위치의 요소는 top,bottom,left 및 right 속성의 영향을 받지 않습니다. 따라서 제어할 수 없는 요소에 적용된 일부 위치 지정을 제거해야 하는 경우가 아니면 이 값을 많이 사용하지 않습니다.

🎯 relative

위치를 상대적으로 설정하고 위, 아래, 왼쪽, 오른쪽 속성을 변경하지 않으면 "위치: 정적"과 같은 작업을 수행합니다. 페이지의 정상적인 흐름에 따라 요소가 추가됩니다. 그러나 위치 지정 속성 중 하나를 변경하면 요소는 입력한 금액을 원래 위치에서 이동합니다.

🎯 absoulte

이름처럼 절대적인 위치. 부모를 기준으로 이동하기 때문에 부모 중에 position이 relative, absolute, fixed 하나라도 있으면 그 부모를 기준으로 절대적으로 움직입니다.

🎯 fixed

화면에 고정된 위치. 스크롤을 상하로 움직여도 못 박아 둔 액자처럼 움직이지 않는다.

---

사진 출처:

https://medium.com/baakademi/css-position-property-69d0596baf3c