position은 요소를 원하는 위치에 위치시키는 속성입니다.
position에는 relative, static, absolute, fixed, sticky 총 5가지 속성이 존재합니다.
sticky는 아직 지원하는 브라우저가 많지 않기때문에 relative, static, absolute, fixed
4가지를 정리해보려고 합니다.
position을 사용할때 주의 사항은 type -> 기준점 두가지를 주의해야 합니다.
position의 type과 이에 따른 기준점을 의미합니다.
1.position:static;
가장 기본이 되는 position 속성입니다.
div, body, head등 거의 모든 요소들이 기본적으로 positino static을 가지고 있습니다.
2.position:relative;
자신이 본래 있던 위치를 이동의 기준점으로 갖는 position 요소 입니다.
float와 position relative의 차이점
float을 사용해서 요소들을 움직이면 전체적인 레이아웃이 붕괴되는 현상이 나타납니다.
위의 화면에서 red 태그에 float을 적용하게 되면
이처럼 전체적인 레이아웃이 무너지게 됩니다.
float으로 레이아웃이 무너지면서 부모태그의 height값 또한 변경됩니다.
하지만 position:relative; 를 사용해서 위치를 변경해주게 되면
속성이 적용된 요소의 변화만 생길뿐 전체적인 레이아웃이 무너지거나 부모태그에 영향을 주거나 하는일이 생기지 않습니다.
???