Position의 relatve와 absolute 이것만 알면 이해됨

내용 목차

CSS의 포지셔닝에서 가장 중요한 것이 position입니다. 그런데 이것이 만만치 않게 이해하는데 헷갈립니다. 특히 relative, absolute 입니다.

오늘 설명하는 것만 이해하면 html 요소들을 포지셔닝하는데 엄청 쉬워질 것이라고 확신합니다.

relative 와 absolute 관계

위의 그림처럼 position에서 relative 부모이고 absolute는 자식이라는 사실만 기억하고 있으면 됩니다. 이것이 제일 중요합니다.

위의 그림과 같이 absolute는 relative가 있어야만 의미를 찾을 수 있는 속성입니다. relative 속성은 내가 “부모”라고 선언해주는 기능이 거의 전부입니다.

자 이제 잠시 건너뛰어서 미리 알아두어야할 사항에 대해 알아 보겠습니다.

<body> 태그는 따로 적지 않더라도 그 자체적으로 부모속성인 relative 값을 갖는다. 자체적으로, 태생적으로, 디폴트로 relative을 갖는 태그는 body 태그뿐입니이다. 다른 태그는 모두 속성을 적어줘야 relative 속성이 적용됩니다.
이런 이유 때문에 relative가 없이 absolute를 사용하게 되면 body태그 기준으로 움직이게 됩니다.
position 속성이 입력하지 않으면, 부모-자식 구조를 갖는 html 코드는 부모-자식 처럼 같이 움직인다. 하지만 만약 자식 태그에만 absolute 속성을 넣게되면 그때부터 자식은 자식이 아니다. 따로 움직인다.

<div> 나는 부모태그
     <div> 나는 자식태그 </div>
</div>
Code language: HTML, XML (xml)

Html 태그가 부모자식 구조가 아니고, 수평적 구조라면 아무리 relative, absolute를 써도 position 속성은 적용되지 않는다.

<div> 나는 부모 </div>
<div> 나는 자식 </div>
Code language: HTML, XML (xml)

absolute의 행동

■ absolute는 자식으로서 항상 부모를 찾는다. 그리고 부모가 있으면 그 부모 안에서만 움직이며 벗어나려 하지 않는다. 자신의 행동의 모든 기준은 부모가 있는 위치이다.

relative가 있는 부모 태그의 좌측 상단이 기준이며, 모든 움직임은 여기를 기준으로 움직인다.

기준점에서 아래로 얼마나 떨어졌는지 (top)
기준점에서 왼쪽으로 얼마나 떨어졌는지 (left)

■ position:absolute를 갖는 요소가 자신의 부모 요소인 relative를 계속 찾는 데 그런 요소가 상위태그중에 하나도 없다면, 결국은 body태그를 기준으로 움직이게 된다.

즉, html에서 div로 자식 div를 아무리 감싸고 있더라도 relative가 없다면 부모로 인정하지 않고 자기 마음대로 움직이게 되는 것이다. 자식에게 absolute를 붙여줬으면 당연히 부모도 relative를 붙여줘야 부모가 의도한 대로 움직이는 것이다.

■ relative는 속성을 넣어도 아무런 변화가 없다. 일종의 기준점 역할만 수행하기 때문이다. 그런데 absolute는 값을 넣게 되면 지표에서 풍선이 떠오르듯이 붕~~~ 떠버린다. 그래서 그 아래에 있는 태그들이 그곳에 태그가 있는줄 모르고 윗쪽으로 밀려 올라와 버린다. 이런 특성은 미리 알고 있어야 대비가 된다.