Position의 사용 예
- static: "static"은 기본값으로, 요소를 문서 흐름에 맞게 배치합니다. "Position" 속성을 사용하지 않는 것과 동일합니다.
- relative: "relative"는 요소를 현재 위치를 기준으로 이동시킬 수 있는 속성입니다. "top", "bottom", "left", "right" 속성을 함께 사용하여 이동할 거리를 지정할 수 있습니다. 다른 요소들과 겹칠 수 있습니다.
- absolute: "absolute"는 요소를 부모 요소를 기준으로 이동시키는 속성입니다. 부모 요소 중에서 "position" 속성이 "static"이 아닌 가장 가까운 요소를 기준으로 이동합니다. 따라서, 부모 요소에 "position: relative" 또는 "position: absolute" 속성을 추가해야합니다. 부모 요소와 위치가 결정되면, "top", "bottom", "left", "right" 속성을 사용하여 이동할 거리를 지정할 수 있습니다.
- fixed: "fixed"는 요소를 뷰포트(viewport) 기준으로 이동시키는 속성입니다. 스크롤에 따라 요소가 움직이지 않으며, 항상 같은 위치에 고정됩니다. "top", "bottom", "left", "right" 속성을 사용하여 이동할 거리를 지정할 수 있습니다.
- sticky: "sticky"는 요소를 스크롤에 따라 이동하되, 특정 지점에 고정하는 속성입니다. "position: relative"와 "position: fixed"의 중간 형태로, 요소가 스크롤할 때 스크롤의 시작 위치에서 일정 위치까지는 상대적으로 이동하고, 일정 위치 이후부터는 고정됩니다.
이러한 "Position" 속성을 적절히 활용하여 HTML 요소를 원하는 위치에 배치하고, 레이아웃을 구성할 수 있습니다.
'CS' 카테고리의 다른 글
| 브라우저 저장소 차이(local storage, session storage, cookie) (0) | 2023.03.31 |
|---|---|
| this 가 동작하는 원리와 용법 (0) | 2023.03.31 |
| HTTP와 HTTP 메세지구조 (0) | 2023.03.30 |
| 캐시의 특징과 예시 (0) | 2023.03.29 |
| 프레임워크와 라이브러리의 차이점 (0) | 2023.03.29 |