CSS: position에 대한 이해

항상 CSS를 만지다 보면 가장 힘들고 빡치는 부분이 컨텐츠가 내가 원하는 위치로 배치되지 않는 경우 인 것 같다.

아마 position에 대한 이해도가 낮아서 그런거라고 생각해서 이번에 공부를 좀 해봤는데 이제 감이 좀 잡힐 것 같다.

Position의 여러 속성 중 일단 배운 부분까지, 이해한 부분까지만 정리하자면

1) static

이름에서도 느껴지듯 "고정 된"이다. 그렇다고 사실 완전히 HTML의 위치에 딱 박혀있는 놈은 아니고 원래 있어야 할 곳에 있고, 거기서 움직이지 않는 녀석 이다.

따라서 offset (left, right, top, bottom) 속성이 적용되지 않는다.

만약 HTML에 Layer가 있다치면, 가장 보통의 Layer라고 이해하자. layer1인 녀석이다. (layer가 높을수록 위에 떠 있는 것)

2) relative

relative를 이해하는 가장 좋은 방법은 layer 2단계< 로 이해하는 것이었다. static은 안정적으로 HTML에 박혀있는 녀석이지만 relative는 걔보다 layer가 한 단계 더 높은 layer 2이다.

그래서 offset을 적용하면 원하는 위치대로 움직인다.
그리고 한 가지 더 특이한 부분이 있는데 이것은 absolute에서 이어한다.

3) absolute

absolute는 부모와의 관계를 끊고 HTML 조상님과의 관계를 찾으려하는 영악한 녀석이다.
이 녀석은 offset이 적용된다. 근데 신기한 건 offset을 적용하는 순간 부모와의 연은 끊어버리고 HTML의 사이즈를 기준으로 자신의 위치를 잡는다. 아주 날라리 날라다니는 놈이다.

그래서 left 0, top 0을 주는 경우에는 본디 자신이 위치한 곳에서 벗어나 화면상 가장 왼/위에 위치한다.

하지만 이 버르장머리 없는 녀석을 부모가 잡아주는 경우가 있다.
그건 바로 부모가 relative속성인 경우다 (나는 놈을 그나마 잡을만한 놈은 뛰는 놈)

absolute 포지션을 가진 자식의 부모가 relative라면 자식은 부모의 위치를 기준으로 자신의 자리를 잡게 된다. 만약에 부모는 static인데 부모의 부모가 relative라면?

자식은 부모의 부모를 기준으로 위치를 잡게 된다. 즉, absolute는 조상 중에서 가장 가까운 relative 속성을 가진 조상을 기준으로 위치를 잡으며 만약 조상 중에 relative가 없다면 HTML을 기준으로 자리를 잡게 된다.