가고

position의 개념은 간단하게 블록을 박스의 위치 기준으로 배치하는 기술이다.

position은 주로 '콘텐츠를 서로 겹치게' 하거나 '마크업(html) 순서와 디자인상의 순서가 다를 경우'에 사용된다.

position의 종류는 static, relative, absolute, fixed.

이 중 relative, absolute가 주로 사용되기 때문에 꼭 이해가 필요하다. (중요!)

결론부터 정리하면,

relative은 '자기 자신을 기준'으로 위치 잡을 때 사용.

absolute는 '부모를 기준'으로 위치 잡을 때 사용된다.

relative와 absolute을 적용한 후에는 'top, bottom, left, right' 등을 이용해 세부 위치를 조정해 준다.

다음은 관련 예시!

"각 box에 position:absolute을 적용해 준다.

앞서 언급한 바와 같이 absolute는 부모의 위치를 기준으로 위치가 정해진다.

따라서 여기서 box의 부모는 body이다.

즉 absolute가 적용된 각각의 box의 처음 위치는 왼쪽 상단의 꼭지점이 되겠다.

그리고 여기에 각각 left, top을 적용해 주었다.

(여기서 z-index를 다르게 적용해서 red, green, blue 순서로 정렬했다.)"

한편, position:relative를 적용하게 되면 어떨까?

relative는 자기 자신을 기준으로 위치를 잡기 때문에 다른 콘텐츠의 위치에 아무런 영향을 미치지 않는다. 

따라서 absolute의 부모 박스 역할을 하거나 조금 이동을 할 경우에 relative을 사용한다.

(fixed는 화면 일부분에 박스를 고정시킬 때 사용.)