CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky

 

⭕ CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky

요소의 위치 지정 기준

 

➡️ static (기본 값)

• 요소를 문서 흐름에 따라 배치합니다.
• positon 설정이 없는 것과 같다.

position: static;

 

➡️ relative (거의 사용하지 않음)

• static 위치를 기준으로, top, right, bottom, left 값을 사용하여 배치합니다.

position: relative;
top: 40px; left: 40px;

 

➡️ ⭐ absolute

• 일반 문서 흐름에서 요소를 제거하고, 위치상 부모 요소를 기준으로 배치합니다.

position: absolute;
top: 40px; left: 40px;

 

➡️ fixed

• 일반 문서 흐름에서 요소를 제거하고, 뷰포트(화면의 보이는 부분)를 기준으로 배치합니다.
• 따라서, 스크롤과 무관하게 항상 같은 위치에 있습니다.

position: fixed;

➡️sticky (거의 사용하지 않음)

• static + fixed

position: sticky;
top: 20px