[CSS] 절대위치를 상대위치로 잡기(?) position: relative와 absolute의 응용

HTML이 다음과 같다고 합시다.

1. <div class="wrap">
2. <div class="first"></div>
3. <div class="second"></div>
4. </div>

position: absolute를 사용하면 문서 전체를 기준으로해서 위치를 잡습니다. 즉, absolute 라는 뜻답게 절대적인 위치입니다!

1. .second {
2. position: absolute;
3. top: 100px;
4. left: 80px;
5. }

라고 한다면 다음 그림과 같이 포지션을 잡습니다.


반면에, position: relative를 사용하면 기존에 자리를 잡던 위치를 기준으로해서 위치를 잡습니다. 즉, relative 라는 뜻답게 상대적인 위치입니다!

1. .second {
2. position: relative;
3. top: 100px;
4. left: 80px;
5. }

라고 한다면 다음 그림과 같이 포지션을 잡습니다.


그런데 전체가 기준이 아니라 부모를 기준으로 위치를 잡고 싶을때가 있을 겁니다.

1. .wrap {
2. position: relative;
3. }
4. .second {
5. position: absolute;
6. top: 100px;
7. left: 80px;
8. }

이런 경우에, second가 absolute임에도 불구하고 문서전체가 아닌 relative속성을 가진 부모인 wrap를 기준으로 해서 위치를 선정하게 됩니다. 즉 문서 전체가 아니라 wrap를 기준으로 해서 위치를 잡습니다! 부모가 relative이고 자식이 absolute라면, 부모의 위치를 기준으로 한다는 거죠. 바로 아래처럼 말이죠,

이거 굉장히 유용한 경우가 많습니다.
absolute와 relative가 만나면 상대적으로 절대적인 위치를 잡는다는게 너무 편리하죠~

 

[출처] http://qnrdlqkrwhdgns.canxan.com/prob/post/52