css 다룰 때 항상 까다로웠던 주제라 정리해보려고 한다.
Position?
css 특성 중 position은 element에 사용되는 위치를 지정하는 방법을 말한다.
다음과 같이 다섯가지의 값을 가질 수 있다.
- static
- relative
- fixed
- absolute
- sticky
이후 top, bottom, left, right를 통해 element의 위치를 결정할 수 있다.
static
position의 default값. 기본적으로 HTML이 배치하는 순서대로 나열된다.
defulat값이기 때문에 따로 작성하지 않아도 되며
top, bottom, left, right 속성의 영향을 받지 않는다.
relative
기존 배치되는 순서대로 나열되지만, top, bottom, left, right로 위치를 바꿀 수 있다.
fixed
viewport에 상대적으로 위치하여 페이지가 스크롤 되더라도 항상 같은 위치에 머무른다.
absolute
가장 가까운 조상 element를 기준으로 배치된다.
프로젝트를 할 때 로그인창 만들때 유용하게 사용했음.
sticky
일반적인 배치를 따라 위치하지만 가장 가까운 scrolling ancestor에 상대적으로 위치하게 됨.
웹사이트의 광고같은 요소들이 sticky를 많이 씀.
Hello World :D