position:absolute;
position:absolute; 는 조상 태그중 position이 static이 아닌 태그를 중심으로 포지션이 변하는 속성입니다.
position:absolute;를 적용시키게 되면 float속성을 적용했을때와 비슷한 효과가 생깁니다.
기본적으로 display 속성으로 inline 속성을 가지고 있는 span 태그에 position absolute를 적용하면
display 속성이 block으로 변하는 것을 알 수 있습니다.
float 속성과 position:absolute의 차이점으로는
float의 경우 텍스트같은 inline content들이 float이 적용된 요소들을 피해갔지만
position:absolute가 적용된 요소들은 저런 현상이 나타나지 않습니다.
absolute는 기준점을 조상 요소들 중 static이 아닌 요소들 중 원하는 위치를 기준으로 잡을 수 있습니다.
가장 안정적인 기준점은 주변 요소에 영향을 주지 않는 relative를 기준으로 잡는 것입니다.
red 태그에 position absolute를 적용시키고 left를 0px만큼 움직이도록 하자 기본 position이 static인 부모 태그를 건너뛰고 position이 relative인 조상태그를 기준으로 움직인 것을 확인할 수 있습니다.
position:fixed;
기본적으로 absolute와 비슷한 성격을 띄고 있습니다.
차이점으로는 absolute의 경우 조상태그 중 position이 static이 아닌 태그를 기준으로 움직인다면 fixed는 자신의 기준점을 화면 viewport 전체로 잡고 있는 점입니다.
position fixed의 경우 브라우저 전체 창을 기준으로 움직입니다.
red 태그의 position을 fixed로 적용하고 left:0 의 값을 주자 전체 화면을 기준으로 태그가 움직인 것을 알 수 있습니다.
position으로 요소들을 옮길때 right-left, bottom-top 각각 둘 중하나의 값만을 이용해서 요소들을 옮기는게 수월합니다.
