CSS Position 정리

css 스타일 position 속성값을 공부하며 정리해 보았습니다.

 

1. Static

position 의 기본값으로서 HTML 문서의 흐름에 따라 배치되는 방법입니다.

position 속성에 아무것도 적어주지 않으면 static 이 지정됩니다.

위치를 지정하는 top, bottom, left, right 값의 영향을 받지 않습니다.

static position

position 이 static 일때는 top, left 속성이 적용이 안되는것을 확인할수 있습니다.

 

2. Relative

static 요소와 마찬가지로 HTML 문서의 흐름에 따라 배치되지만, 기존의 자신의 위치에서 상대적인 offset 이 적용됩니다.

다시말해서 top, bottom, left, right 속성이 자기자신 기준에서 상대적으로 offset 이 적용됩니다.

relative position

position 이 relative 일때는 기존에 있어야할 위치에서 static 과 다르게 상대적으로 offset 이 적용되는것을 볼수 있습니다.

 

3. Absolute

HTML 문서의 흐름에 따른 배치를 무시하고, 가장 가까운 부모를 기준으로 상대적으로 배치됩니다.

position relative

relative 와 비교해서 보면 더 이해가 잘 될것 같습니다. relative 같은 경우는 원래 자신의 위치를 차지한 가운데 top, left offset 이 적용된 반면에 absolute 는 자신의 본래 위치는 무시되고 부모 박스를 기준으로 offset 이 적용됩니다.

 

4. Fixed

HTML 문서의 흐름에 따른 배치를 무시하며 스크롤시에도 고정된 곳에 위치하게 됩니다.

fixed

5. Sticky

Sticky 는 fixed 와 비교해서 생각하면 조금 더 쉬울 것 같아 fixed 와 sticky 두개 박스를 준비했습니다.

fixed 는 위에서 살펴본 바와 같이 HTML 문서 흐름에서 완전히 벗어나 독립적인 position 에서 스크롤 상관없이 고정되어있습니다.

sticky 는 sticky 의 부모 마크업에 의해 고정됩니다.

fixed sticky