position 종류

html && css에서 엘리먼트의 위치를 지정하는 방법은 4가지로 분류됩니다.

static (정적 위치), relative (상대적 위치), absolute (절대적 위치), fixed(고정 위치)가 있습니다.

position:static;

우선 static의 예를 살펴보죠. 아래 이미지는 각각의 엘리먼트에 아무 속성도 추가하지 않았을 때의 화면입니다.

other라는 독자적인 엘리먼트, 그리고 parent를 하위의 child엘리먼트가 있습니다.

child 엘리먼트에 position:static; 을 추가해보고, 화면을 보세요 달라지는게 있나요?

달라지는 건 없습니다. 즉 position의 default value는 static이라는 것을 알 수 있습니다.

relative라는 단어에서 유추할 수 있듯이, position:relative는 상대적은 위치값을 나타냅니다.

위와 같이 other, parent, child엘리먼트가 존재할 때 child에 position을 relative로 설정해 보겠습니다.

화면이 어떻게 변했을까요?

( left는 왼쪽을 기준으로 50px만큼 떨어져서 위치해라, top은 상단을 기준으로 100px만큼 떨어져서 위치시켜라. )

위와 같은 이미지처럼 child는 parent를 원래의 위치에서 left, top값만큼 위치가 변경된 것을 알 수 있습니다.

absolute는 절대적 위치를 나타냅니다. absolute에서는 다소 헷갈리는 부분이 있으니 집중해주세요.

absolute는 부모의 position값이 static이냐 아니냐에 따라 상이한 결과를 보여줍니다.

parent의 position을 설정하지 않거나, static으로 주었을 때 부터 살펴보겠습니다.

위의 경우, child는 parent기준으로 left,top이 적용될까요? 아니면 html (최상위) 기준으로 적용될까요?

정답은 html 기준으로 적용됩니다.

absolute는 바로 상위의 엘리먼트에서 position:static; 혹은 position을 설정하지 않았다면, 최상위 html 엘리먼트를 기준

으로 위치를 설정하게 됩니다. 또한, absoulte의 특성상 부모 엘리먼트와의 연결이 끊기게 되면서 부모 엘리먼트와는 무관

하게 됩니다. 즉, 크기를 지정할 수 없게 되면서 자기 자신의 콘텐트 크기만 남게되는것입니다.

( 이 경우, 크기를 지정하고 싶으면 width,height값을 따로 주면됩니다. )

그러면서 자연스럽게? 부모 또한 자식 엘리먼트가 차지하고 있던 공간을 빼버리게 되는 것입니다.

이제 parent의 position을 relative( static이 아닌 다른 값 )을 넣어보겠습니다.

위에서 볼 수 있듯이, 이제는 최상위 엘리먼트인 html을 기준으로 child의 위치값이 정해지는 것을 확인할 수 있습니다.

참고 자료 : https://opentutorials.org/course/2418/13414