CSS의 position 속성을 사용하면 복잡한 레이아웃을 구성할 때 효과적으로 이용할 수 있습니다. 텍스트나 이미지를 html 코드와 상관없이 그리고 싶은 위치로 이동시킬 수 있습니다.
1. position : static (기본 값)
default 값으로써 위치를 지정하지 않았을 때의 값입니다.
실행 결과
default 속성이므로 position:static을 지정하지 않아도 기본 값으로 설정됩니다.
2. position : relative (상대적 위치)
static 속성의 원래 위치에서부터 계산하게 됩니다. top, right, bottom, left 등의 속성이 있어야 원래의 위치에서 이동할 수 있고 그 자체로는 어느 위치로 이동시키지 않습니다.
실행 결과
오른쪽 box2는 top에서 50px만큼 right에서 150px만큼 이동하였습니다.
3. position : absolute (절대적 위치)
absolute 속성은 상위 요소(부모)를 기준으로 위치가 절대적으로 움직이게 됩니다.
상위 요소가 relative, absoulte, fixed 속성 중 하나여야 합니다.
일반적으로 absoulte를 사용할 때는 절대적으로 움직이고 싶은 상위 요소(부모)에
relative 속성을 사용하면 됩니다.
HTML
box1의 상위 요소(부모)로 parent를 설정하였습니다.
실행 결과
parent 박스 안에 있는 빨간색 박스는 parent를 기준으로 top에서 50px, left에서 50px
만큼 절대적인 위치를 이동하였습니다.
4. position : fixed (고정된 위치)
fixed는 말 그대로 고정된 위치입니다. 화면이 바뀌어도 고정된 위치를 설정할 수 있으며,
상위 요소(부모)에 영향을 받지 않으며 브라우저 창이 기준이 됩니다.
absoulte는 relative를 가진 부모가 필요했지만 fixed는 필요하지 않습니다.
실행 결과
스크롤을 내려도 fixed 설정이 적용된 노란색 박스는 항상 그 위치에 보이게 됩니다.
페이지에 있는 긴 글들을 스크롤을 내려서 읽을 때 fixed 속성을 이용해서 메뉴들을 설정하면
사용자가 좀 더 편리하게 이용할 수 있겠죠?
