css에서 position

코딩을 하다가 보면 css에서 position이라는 부분을 종종 보게 된다.
사실 단어의 뜻만 알면 그리 어렵지 않게 뜻을 알 수가 있다.
예를 들어 보자.

(Language : css)

1. <style>
2. #firstLayer {
3.     position:absolute;
4.     width:100px;
5.     height:100px;
6.     border:1px solid #000;
7.     }
9. #secondLayer {
10.     position:relative;
11.     width:100px;
12.     height:100px;
13.     border:1px solid #000;
14.     }
15. </style>
17. <div id="firstLayer"></div>
18. <div id="secondLayer"></div>

위 두 코드는 다른 점이라고는 딱 한 가지!
position이다.
absolute, relative 이 두 가진데 전자는 절대적이고 후자는 상대적이다.

절대 위치라고 하면 우리가 보는 모니터의 가장 좌측 최상단(좌표는 0, 0)이다.
반대로 상대 위치라고 하는 건 위에 녀석과는 반대의 개념이겠다.
지금 위의 저 코드 같은 경우는 실행을 했을 때 똑같은 위치에 겹쳐져서 나온다.
<div id="firstLayer"></div> 이것과 <div id="secondLayer"></div> 이 사이에 <br />을 몇 개 넣어 보아라.
그러면 무슨 말인가 알게 될 것이다.

absolute의 경우는 어디에 넣어놓든 무조건 시작 위치는 브라우져의 가장 좌측 최상단이고, relative는 자기가 시작되는 지점에서부터이다.

이해가 안 된다면 직접 코드를 끄적여 보는 것이 가장 좋은 방법이다.