• position : static -- 기본 값,
  • position : relative -- 기본으로 위치해야 할 곳에서 top, bottom, left, right 등의 box offset property를 이용하여 위치를 변경 시킬 수 있음
  • position : absolute -- position이 absoulte인 element는 기본 document flow에서 제외된다. 그렇기 때문에 relative 또는 absoulte한 부모의 위치를 기준으로 element의 위치가 정해지게 된다.

element의 position : absolute 이고, 해당 element의 가장 가까운 상위 엘리먼트의 position: relative(or absolute) 일때

1. 위치

parent element가 postion : relative,
child element가 position : absolute , top:20px 이라면 부모의 위치를 기준으로 top에서 20px 만큼 내려오게 됨

2. 크기

 <div class="parent">
  <div class="child"> 1</div>
  <div class="child"> 2</div>
  <div class="child"> 3</div>
</div>
.parent { position : relative}
.child { position : absolute, height : 10px }

이렇게 child에 height를 넣어줬는데 parent의 div height이 변동이 없었다. position : absolute 인 element는 document flow에서 완전히 제외되기 때문이다. 부모에게 영향을 주지 못하기 때문에 부모의 height는 child의 높이에 따라 자동으로 늘어나지 않는다.

참고 : Detailed Positioning