1. static (기본값)

기본적으로 모든 요소에 적용되는 값입니다. 요소는 문서의 정상적인 흐름을 따르며, top, left 등의 위치 속성은 무시됩니다.
특별한 위치 지정이 필요하지 않을 때 사용되며, 페이지 구조의 기본적인 위치를 설정하는 데 적합합니다.

2. relative (상대적 배치)

요소는 문서의 흐름을 유지하면서, 자신의 원래 위치를 기준으로 상대적으로 이동합니다.
위치 속성(top, left, right, bottom)을 사용해 원래 자리에서 상대적인 이동을 할 수 있지만, 요소가 차지하는 공간은 변하지 않습니다. 즉, 다른 요소들은 원래의 위치를 기준으로 배치됩니다.

3. absolute (절대적 배치)

요소가 문서 흐름에서 완전히 제거되며, 다른 요소들에 영향을 주지 않습니다.
가장 가까운 relative, absolute, 또는 fixed 부모 요소를 기준으로 위치가 결정되며, 부모가 없을 경우 뷰포트를 기준으로 합니다.
레이아웃과 상관없이 자유롭게 위치를 지정할 수 있으므로, 팝업, 드롭다운 메뉴 등 특정 위치에 고정해야 하는 요소에 자주 사용됩니다.

4. fixed (고정적 배치)

요소가 브라우저 창(뷰포트)에 고정되어 스크롤을 해도 항상 같은 위치에 유지됩니다.
문서 흐름에서는 제외되며, 부모 요소와는 상관없이 브라우저 뷰포트를 기준으로 위치가 결정됩니다.
주로 상단 고정 네비게이션 바나 툴바 같은 요소에 사용됩니다.

5. sticky (고정적/상대적 배치)

스크롤을 통해 지정된 위치에 도달하기 전까지는 relative처럼 동작하고, 특정 스크롤 위치에 도달하면 fixed처럼 고정됩니다.
top, left, right, bottom 등의 위치를 설정할 수 있으며, 주로 헤더나 특정 섹션 상단에 고정되는 기능을 구현할 때 유용합니다.