CSS의 position 속성의 기본값은 "static"입니다. "static" 위치 속성은 요소를 일반적인 문서 흐름에 따라 배치하며, 위치를 명시적으로 지정하지 않는 상태입니다. 요소가 "static"으로 설정된 경우, 다른 위치 속성(예: top, right, bottom, left)은 아무런 영향을 미치지 않습니다.
position 속성은 일반적으로 다음 값 중 하나로 설정됩니다:
- static: 요소를 일반적인 문서 흐름에 따라 배치합니다. 위치를 명시적으로 지정하지 않음.
- relative: 요소를 자체 위치에서 이동시킵니다. 다른 요소에 영향을 주지 않습니다.
- absolute: 요소를 가장 가까운 상대적(부모 요소 중 position: relative, position: absolute, position: fixed 등이 설정된 요소)으로 배치합니다.
- fixed: 요소를 뷰포트(화면) 기준으로 고정시킵니다. 스크롤해도 위치가 고정됩니다.
- sticky: 요소가 화면에 나타나기 전까지는 relative와 동일하게 동작하고, 스크롤되면 화면에 고정됩니다.
각 position 값은 요소를 다른 방식으로 배치하고 조절하는 데 사용됩니다. "static"은 요소를 일반적인 문서 흐름에 따라 배치하며, 위치를 수동으로 조절하지 않는 가장 일반적인 설정입니다.
'프론트엔드 > HTML' 카테고리의 다른 글
| html 로그인 디자인 (0) | 2024.02.05 |
|---|---|
| box-sizing 요소의 크기를 계산하기 위한 기준을 지정할 때 사용되는 속성 (0) | 2023.10.26 |
| grid 활용2 (문으로 이용한 활용) (0) | 2023.10.25 |
| grid 활용법 (0) | 2023.10.25 |
| CSS 띄움을 이용한 실습 (0) | 2023.10.25 |