position속성은 엘리먼트(태그)의 위치를 제어할 수 있습니다. 특히 포토샵의 레이어같이 엘리먼트마다 서로 중첩할 수 있는 특징을 가지고 있습니다.
이 속성의 값은 relative absolute fixed static이 있습니다.

- 속성설명

• static : 기본 포지션값입니다. 이 값을 사용하면 left, right, top, bottom 속성을 사용할 수 없습니다.


• relative : 상대적인 위치에 배치됩니다. 즉 그 엘리먼트의 본래의 위치를 기준으로 배치되죠. 위치는 top, right, bottom, left 속성에 의해 지정됩니다. 뒤에 계속되는 요소의 배치에 영향을 주지 않습니다.


• absolute : 절대적인 위치에 배치됩니다. 즉 포함블럭의 네변을 기준으로 배치됩니다. 위치는 top, right, bottom, left 속성에 의해 지정되죠. 뒤에 계속되는 요소의 배치에 영향을 주지 않습니다.


• fixed : 스크롤이 되어도 이 값을 적용한 엘리먼트는 그대로 붙어있습니다.

- 예제소스

<style>

.parent {

 position: relative;

 width: 400px; height: 300px;

 border: 2px solid #ccc;

}

.parent .box {

 position: absolute; left: 50px; top: 50px;

 width: 100px; height: 100px;

 background: green;

}

</style>



<div>blank</div>

<div class="parent">

 <div class="box">.box</div>

</div>

- 데모
http://codepen.io/anon/pen/KyEia


엘리먼트가 서로 겹쳐있을때 겹쳐지는 순서를 지정하는 속성은 z-index입니다.

- 예제소스

<div class="parent">

 <div class="child1"></div>

 <div class="child2"></div>

</div>

.parent {

 position: relative;

 width: 400px; height: 300px;

 border: 2px solid #ccc;

}

.parent .child1, .parent .child2 {

 position: absolute;

 width: 100px; height: 100px;

}

.parent .child1 {

 z-index: 2;

 background: red;

 left: 25px; top: 25px;

}

.parent .child2 {

 background: green;

 left: 75px; top: 75px;

}

위의 소스는 빨간색 박스와 녹색박스가 겹쳐있는 예제소스입니다.
기본적으로 녹색박스가 빨간색박스 위에 올라와야 하는데 z-index속성을 적용해서 빨간색박스가 올라왔습니다.
아래 링크는 그것을 적용한 데모페이지 입니다.

- 데모
http://codepen.io/anon/pen/bkgEi