CSS Position 속성
1. static
static 속성값은 position 속성의 default 값입니다. 즉, 별다른 컨트롤 없이 문서의 흐름 그대로 배치됩니다. position 속성값은 cascade 되지 않기 때문에 굳이 그 값을 초기화해줄 필요가 없어 거의 쓸 일이 없는 값입니다.
2. relative
'자기 자신에게 relative' 하다는 뜻에서 relative라는 값 이름이 붙여졌습니다.
top, left, bottom, right 등의 positioning 속성을 따로 설정하지 않으면 배치되는 위치는 static과 다를 바가 없습니다.
top, left, bottom, right 등의 positioning 속성에 따라 자신의 원래 위치에서 이동된 위치에 배치됩니다.
static으로 배치된 요소들과는 다르게 z-index 속성을 줄 수 있습니다. 그래서 따로 z-index 값을 부여하지 않아도 다른 static으로 배치된 요소들보다 위에 나타나게 됩니다.
자손 요소들 중 absolute 속성을 가진 요소들의 범위를 제한합니다.
3. absolute
top, left, bottom, right 등의 positioning 속성에 따라 원하는대로 배치가 가능합니다. 단 원점은 조상 요소중 가장 가까운 relative로 배치된 요소를 원점(기준점)으로 합니다. 이와 같은 조상 요소가 없다면 <html>요소, 즉 페이지 자체를 기준점으로 합니다.
문서의 흐름에 벗어나서 배치되기에, 다른 요소에게 영향을 받지도 주지도 않습니다.
4. fixed
viewport를 기준으로 고정된 위치에 배치됩니다.
스크롤 된다고 viewport가 변하지는 않기 때문에 스크롤해도 fixed로 배치된 요소는 움직이지 않고 고정된 자리에 나타나게 됩니다. 이러한 특성을 이용해 보통 어느 스크롤 상태에서도 보여지게 되는 네비게이션 바에 많이 사용합니다.
다른 요소를 가릴 수 있음에 주의해야 합니다.
5. sticky
평소에는 static 요소처럼 있다가, 스크롤을 하며 sticky가 적용된 요소를 지나게 되면, 해당 요소의 부모 요소 안에서 fixed 인 것 처럼 행동하게 됩니다.
'CSS' 카테고리의 다른 글
| CSS Display (0) | 2023.05.09 |
|---|---|
| CSS Box Model (0) | 2023.05.09 |
| Float과 Clear에 대한 이해 (0) | 2023.04.10 |
| CSS 기본 - 잊고 넘어가기 쉬운 것들에 대한 복습 (0) | 2023.04.06 |
