𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀

𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀

CSS position 속성은 요소가 페이지의 어느 위치에 배치될지를 결정합니다. top, right, bottom, left 속성을 사용하여 요소를 이동시킬 수 있습니다.

위치 지정 방식에는 다섯 가지 주요 유형이 있습니다.

Static 기본 설정입니다. 요소는 페이지의 일반적인 흐름을 따릅니다. 여기서는 top 또는 left 속성을 사용해도 아무런 변화가 없습니다.

Relative 요소의 원래 위치를 기준으로 이동합니다. top에 20px을 추가하면 요소가 아래로 이동합니다. 다른 요소들은 원래 자리를 유지하며, 생긴 빈 공간을 채우지 않습니다.

Absolute 요소를 일반적인 페이지 흐름에서 제거합니다. 가장 가까운 위치 지정된 조상(positioned ancestor)을 기준으로 위치를 잡습니다.

그 외에도 Fixed와 Sticky 유형이 있습니다. Fixed 요소는 스크롤을 해도 한 자리에 고정되어 있습니다. Sticky 요소는 특정 지점에 도달하기 전까지는 relative 요소처럼 동작하다가, 그 지점에 도달하면 고정됩니다.

이 속성들에 대해 더 자세히 알아보려면 여기를 확인하세요.

출처: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8