Absolute positioning
Absolute positioning은 reference box를 기준으로 상하좌우로 위치를 이동시킨다.
Reference box란, 현재 만들고 있는 문서의 가장 상위 element가 차지하는 영역을 말한다.
HTML에서는 HTML element의 영역을 말하는데, 보통 브라우저 화면 크기라고 생각해도 된다.
만약, 부모 element가 absolute positioning에 의해 위치가 정해졌다면,
자식 element에 absolute positioning을 적용할 때는 부모 element의 box를 기준으로 위치를 잡게 된다.
Absolute positioning을 하게 되면 margin은 없어지고,
기호 설명
A | B: A 또는 B 중의 하나이다.
top: 길이 | 퍼센트 | auto
브라우저 화면 윗쪽을 기준으로 얼마나 내려올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 auto이다.
right: 길이 | 퍼센트 | auto
브라우저 화면 오른쪽을 기준으로 왼쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 auto이다.
bottom: 길이 | 퍼센트 | auto
브라우저 화면 아랫쪽을 기준으로 윗쪽으로 얼마나 올라올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 auto이다.
left: 길이 | 퍼센트 | auto
브라우저 화면 왼쪽을 기준으로 오른쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다.
모든 element에 적용되며, 유전되지 않는다.
초기값은 auto이다.
※ 다음 장에서 예를 통해 normal, relative, floating, absolute positioning의 차이를 비교해 보자.