[CSS 입문] CSS 포지셔닝의 주요 속성들

1. box-sizing - 박스 너비 기준

box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 패딩이나 테두리까지 포함시켜 사용할 지 결정할 수 있습니다.

box-sizing: content-box | border-box

2. float 속성 - 왼쪽이나 오른쪽으로 배치

float: left | right | none

3. clear 속성 - float 속성 해제

clear: none | left | right | both

4. position 속성 - 배치 방법 지정

속성 값	설명
static	요소를 문서의 흐름에 맞추어 배치한다.
relative	이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다.  top, right, bottom, left 속성을 사용할 수 있으며 좌푯값을 사용해 위치를 지정할 수 있다.
absolute	top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치한다.  absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position을 relative로 지정해야 한다.
fixed	지정한 위치에 고정해 배치한다. 화면에서 요소가 잘릴 수도 있다.  absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다.

5. visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기

속성 값	설명
visible	화면에 요소를 표시한다.
hidden	화면에서 요소를 감춘다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미친다.
collapse	표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. 그 외의 영역에서 사용하면 'hidden'처럼 처리한다.

6. z-index 속성 - 요소 쌓는 순서

z-index: <숫자>

z-index 값이 작을 수록 아래에 쌓이고 z-index 값이 클 수록 z-index 값이 작은 요소보다 위에 쌓입니다. z-index 값을 명시 하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index:1 값을 가지며 그 후 삽입하는 요소들은 z-index 값이 점점 커집니다.

<출처 - Do it! HTML5+CSS3 웹 표준의 정석>