html 코드를 작성하면, 작성한 순서대로 페이지에 그려집니다. 하지만 CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있어요. 어렵지만 정말 멋지죠!
Position 프로퍼티에는 대표적으로 세 가지 값이 있습니다. 바로 relative, fixed, absolute입니다. 각기 다른 세 가지의 특징을 한 번 살펴볼까요?
relative
relative 혼자서는 특별한 의미가 없습니다. 딱히 어느 위치로 이동하지는 않거든요. 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다. 참고로 top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다.
fixed
고정(fixed) 엘리먼트는 이름 그대로 페이지가 스크롤되더라도 늘 같은 곳에 위치가 고정되어 있습니다. relative와 마찬가지로 top이나 right, bottom, left 프로퍼티가 사용됩니다.
absolute
absolute 엘리먼트는 특정 부모를 '절대적으로' 따릅니다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모의 위치를 기준으로 움직이게 됩니다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 됩니다. 기준으로 삼는 부모 엘리먼트가 없으면 body를 기준으로 삼고, 페이지 스크롤에 따라 움직입니다.
참조: http://ko.learnlayout.com/position.html , wecode
