[CSS] position 정리

https://developer.mozilla.org/ko/docs/Web/CSS/position

 

position의 목적은 HTML 문서 상의 요소를 배치하기 위해서이다.

Copyright weniv

position은 기본적으로 normal flow, float와 함께 층위적으로 구분된다. 정확히 이렇게 층위가 구분되는 것은 아니겠지만 물리적으로 이해를 간단히 하기에 도움이 된다.

 

http://blog.wystan.net/2009/01/12/relationships-between-position-float-display

오래된 글이지만 정리가 잘되어 있어서 리다이렉트

float, normal flow와 함께 비교하며 이해하면 더 이해가 잘된다.

 

position에는 5가지 값이 있다.

static / relative / absolute / fixed / skicky

 

static은 일반 흐름에 따른 배치이기 때문에 따로 정리할 것이 없다. 하지만 중요한 것은 top, right, bottom, left, z-index 속성들이 모두 영향을 주지 않는다는 것

 

relative는 static과 마찬가지로 relative가 적용된 box는 일반적 문서 흐름을 따르되, 자신이 원래 있어야 했던 자리를 기준으로 top, right, bottom, left 값이 적용된다. 다른 요소에는 영향을 주지 않는다.

결국 static과 다른 점은

1. 원래 위치로부터 이동할 수 있다는 것

2. 후술 할 absolute의 기준이 된다는 것

외에는 relative 다음으로 오는 요소가 normal flow라면 왔을 위치 그대로 쌓이는 등 static과 거의 비슷하게 생각해주면 된다.

 

문제의 absolute

absolute는 element를 normal flow에서 제거하고 상단 그림처럼 띄워버린다고 생각하면 쉽다. 즉, 페이지 레이아웃에 공간을 배정하지 않는다. relative와 마찬가지로 top, left등을 통해 offset을 설정할 수 있는데,

relative가 원래 자신의 위치를 기준으로 잡았던 반면,

absolute는 자신의 조상(부모만이 아닌) 요소 중에서 position값이 지정된 요소(즉, relative, absolute, fixed, sticky가 적용된 요소)를 기준으로 한다. static 요소는 기준이 될 수 없다. 만약 조상 요소 중에서 position이 지정된 요소가 없다면 그냥 body요소를 기준으로 이동하게 된다.

 

position absolute가 적용된 element는 display가 block으로 자동적으로 바뀐다.

 

vs float

float은 일반적인 흐름에서의 위치를 기준으로 하지만

position absolute는 아예 일반적인 흐름을 벗어나 버린다.

그래서 absolute, fixed는 float보다 우선해서 박스를 절대적인 위치로 배치되도록 한다.

 

fixed는 absolute와 마찬가지로 normal flow에서 벗어나고, 레이아웃 공간도 가지지 않고 부웅 떠있다. 차이는 viewport등이 기준이라는 것이. 엑셀의 틀고정 같은 느낌? viewport 외의 기준을 잡는 기준은 필요한 그때그때 MDN을 보자. 일반적인 상황은 아닌 것 같다. 조상 중 transform, perspective, filter 중 하나라도 none이 아닌 경우 그 조상을 기준으로 한다고 한다. 기억해두자.

 

z-index 관련해서는 보통 position이면 나중에 나온 태그가 더 위에 배치된다.