position:relative1 Articles

  1. 2007/09/04 css에서 position (8)
Programming/HTML/CSS 2007/09/04 10:47

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는 자기가 시작되는 지점에서부터이다.

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

No Trackback   8 Comments   Tags : ,