요소의 위치를 잡을 수 있는 속성. 웹사이트의 레이아웃을 잡을 때 많이 사용한다.
어떤 요소를 기준으로 좌표를 잡느냐에 따라 속성값이 나뉜다.
포지션 속성을 지정하면 항상 따라와야 하는 속성이 있는데 top, left, bottom, right 라는 좌표값 속성이다.
1 2 3 4 5 6 | #book1{ background: url(images/bg_sm01.png) no-repeat; position: absolute; top: 70px; left: 0%; } | cs |
포지션도 float과 마찬가지로 위로 붕 뜨는 성질이 있다.
이 성질 덕분에 모든 형제 부모를 무시한 채 좌표값으로 자유롭게 이동이 가능한 것.
포지션 속성으로 기준을 잡은 후, 좌표값 속성으로 좌표를 정한다. 이게 기본 사용법이다.
absolute : 절대 좌표
html 혹은, relative를 가진 부모 요소를 기준으로 좌표를 정한다.
부모에 relative 속성이 없을 때
abs를 가진 요소는 html을 기준으로 좌표값이 변경된다.
따라서 abs 요소는 따로 좌표값을 지정하지 않을 시 화면의 *좌측 상단에 붙게 된다.
(*좌표는 기준이 어떠하든 항상 좌측 상단에서 시작한다.)
그래서 마치 원래 부모 요소와 분리가 된 것처럼 보이는 게 특징이다.
부모에 relative 속성이 있을 때
abs를 가진 요소는 relative를 가진 부모 요소의 위치를 기준으로 좌표값이 변경된다.
abs 요소는 rel 부모 요소 안에 갇혀서 그 영역 안에서만 자유롭게 이동할 수 있게 된다.
relative : 상대 좌표
rel이 적용된 요소를 기준으로 좌표값을 정한다.
기준이 '나'이기 때문에 속성을 적용해도 따로 좌표값을 지정하지 않으면 움직임이 없다.
보통 absolute의 기준을 잡기 위해 많이 쓰인다.
fixed : 고정 좌표
화면 높너비를 기준으로 좌표값을 정한다.
fix된 요소는 화면에 달라붙어 스크롤이 되어도 움직이지 않고 좌표를 유지한다.
화면에서 사라지지 않고 사용자에게 계속 보여져야 하는 컨텐츠에 주로 사용한다.