[CSS] position의 absolute와 relative 개념 확실히 잡기

position에서 중요한 absolute 개념과 relative 개념을 알아보자.

absolute

먼저 absolute는 절대적인 위치를 잡아 주기 위해 사용하는 것으로, 엘리먼트들과 관계 없이 자유롭게 위치를 정해줄 수 있다. 자세한 내용은 아래를 참고하자.

1. <div>는 블록 요소지만, position:absolute;로 주게 되면 text 길이만큼만 자리를 차지하게 된다.
2. 아무런 위치를 잡아주지 않으면, body의 margin을 제외한 부분에 위치한다.

 <div id="second">그냥 박스</div>
 <div style="position: absolute; background-color:blueviolet;">absolute 박스</div>

3. 사용자가 원하는 위치를 설정하게 되면 (예를 들어 left:0;) margind이나 padding을 무시한다.

 <div id="second">그냥 박스</div>
 <div style="position: absolute; background-color:blueviolet; left: 0;">absolute 박스</div>

4. 상위 요소의 크기가 줄어든다.

 <div style="background-color: brown;">
        <div style="background-color: blanchedalmond; ">1</div>
        <div style="background-color: aqua;">2</div>
 </div>

 <div style="background-color: brown;">
       <div style="background-color: blanchedalmond; position:absolute;">1</div>
       <div style="background-color: aqua;">2</div>
</div>

relative

absolute가 원하는 위치를 자유롭게 잡고 싶을 때 사용한다고 했었다. 그런데 relative는 원하는 위치를 자유롭게 잡고 싶지만, 특정한 엘리먼트를 기준으로 위치를 잡고 싶을 때 사용한다.

1. 기준이 되는 엘리먼트에 relative 속성을, 움직이고 싶은 엘리먼트에 absolute 속성을 부여해야 한다.

<div style="background-color: brown; position: relative;">
    <div style="background-color: blanchedalmond; position: absolute; right:0px">1</div>
    <div style="background-color: aqua;">2</div>
</div>