1. position 속성

static

이동값이 없는 디폴트 위치

div#myDIV {
position:static;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}

코드상 이동값이 입력되었지만 static 속성을 가졌기 때문에 엘리먼트의 위치가 변하지 않는다.

relative

기본적으로 static과 동일한 디폴트 위치 값을 가진다. top, right, bottom, left 속성을 추가할 경우 static 위치에서 속성값 만큼 이동한다.

div#myDIV {
position:absolute;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}

static과 동일한 디폴트 위치를 기준으로 속성값만큼 사각형이 이동하였다.

absolute

부모 태그가 static을 제외한 relative, absolute, fixed 등의 속성을 가지고 있는 경우 부모 태그의 위치가 절대적인 기준이 되어 이동한다. 기준이 되는 부모 태그가 없을 경우 엘리먼트를 빠져나와 문서 본문이 절대 기준이 된다.

div#myDIV {
position:absolute;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}

기준이 될 부모 태그가 존재하지 않아 문서 본문이 절대 기준이 되었다. result 엘리먼트를 빠져나와 절대 기준 위치에서 사각형이 움직였다.

fixed

특정 속성값을 가진 부모가 필요 없이 브라우저 화면을 기준으로 이동한다. 스크롤이 움직여도 언제나 화면상 지정된 위치에 고정되게 된다.

div#myDIV {
position:fixed;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}

브라우저 화면이 기준이 되어 사각형이 이동하였다. 스크롤을 움직여도 사각형의 위치는 고정된다.

2. inline, inline-block, block

inline

엘리먼트의 너비값이 요소의 너비값과 동일하여 한 행에 여러개의 inline 엘리먼트가 위치할 수 있다.

span#mySpan {
background-color:red;
display:inline;
}

inline-block

inline과 동일하게 엘리먼트의 너비값과 요소의 너비값이 동일하다. 그 외에 직접 엘리먼트의 너비와 높이를 지정할 수 있는 특징이 있어 손쉽게 박스 그리드를 만들 수 있다.

span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

block

엘리먼트의 너비값이 요소의 너비값과 상관없이 언제나 최대값을 가진다. 따라서 한 행에는 오직 한개의 block 엘리먼트만 위치할 수 있다.

span#mySpan {
background-color:red;
display:block;
}

3. float

float

이미지 주위를 텍스트로 감싸는 기능을 가진 프로퍼티. 페이지의 전체 레이아웃을 잡을 때에도 자주 쓰인다.

img {
float: right;
}

clear

float의 동작을 제어할 때 쓰이는 프로퍼티. 속성값을 이용해 엘리먼트 주위에 있는 float 엘리먼트를 옮길 수 있다.

<img src="w3css.gif" width="100" height="132">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
<p><strong>Remove the "clear" class to see the effect.</strong></p>

overflow

float 엘리먼트가 바깥 엘리먼트를 넘어가는 현상이 생길 경우 주로 사용하는 프로퍼티. hidden 속성값을 사용할 경우 내용이 넘치면 잘라내고 자른 부분은 보이지 않게 된다. auto 속성값을 사용할 경우 내용이 넘치게 되면 스크롤바를 표시해준다.

.clearfix {
overflow: auto;
}