728x90
position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:
1. static (기본값)
- 의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.
- 사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.
2. relative
- 의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.
- 사용 예: 작은 위치 조정이 필요할 때 사용됩니다.
3. absolute
- 의미: 요소가 문서의 일반적인 흐름에서 제거되고, 가장 가까운 relative, absolute, fixed, 또는 sticky로 설정된 부모 요소를 기준으로 배치됩니다. 부모 요소가 없으면 문서의 <html>을 기준으로 배치됩니다.
- 사용 예: 특정 위치에 고정된 요소를 만들 때 사용됩니다.
4. fixed
- 의미: 요소가 뷰포트를 기준으로 배치되어 스크롤해도 항상 같은 위치에 고정됩니다.
- 사용 예: 네비게이션 바, 사이드바, 팝업 창 등의 고정된 요소를 만들 때 사용됩니다.
5. sticky
- 의미: 요소가 스크롤 위치에 따라 relative와 fixed 사이에서 전환됩니다. 스크롤할 때 설정한 임계점에 도달하면 요소가 고정된 상태로 바뀝니다.
- 사용 예: 스크롤에 따라 특정 위치에 고정되었다가 다시 흐름에 따라 이동하도록 할 때 사용됩니다.
728x90
'웹개발' 카테고리의 다른 글
| [React] useTranslation 을 통해 다국어 지원하기 (feat.i18next) (0) | 2024.10.14 |
|---|---|
| [React] React Context API로 상태 공유하기 (0) | 2024.09.09 |
| [React] 'react-beautiful-dnd' 를 사용하여, 드래그 엔 드롭 구현하기 (drag and drop) (0) | 2024.09.05 |
| [React] ReactQuill 을 사용하여 이미지를 서버에 보낼 때 src 길이 줄이기 및 실제 이미지에는 영향 안끼치는 방법 (0) | 2024.09.05 |
| [React] IntersectionObserver DOM의 업데이트(예: 좋아요 버튼 클릭) 이후에야 비로소 IntersectionObserver가 다시 작동할때 (3) | 2024.08.28 |