Web publisher/xhtml, css2009.07.29 23:26
오랫만에 html / css 글을 작성합니다.
오늘은 css의 속성인 포지션 (position) 에 대해 포스팅해 보겠습니다.

사용된 이미지를 클릭하시면 조금은 크게 보실 수 있습니다.

일단 포지션(position) 을 이용한 예를 정리해 보겠습니다.

1. 포지션(position)을 이용한 예

다음 뷰 position:absolute;

다음뷰에서 볼 수 있는 화면입니다.
해당 제목에 마우스 오버를 하게 되면 간략한 내용의 박스가 나타나는 형태입니다.
이것도 포지션 (position)을 이용한 방법입니다.

지마켓 홈페이지 position:absolute;

홈페이지에서 많이 사용되는 퀵메뉴 or 윙메뉴 입니다.
홈페이지의 스크롤에 따라다니는 메뉴바 형태입니다.
이런 형태 또한 포지션(position) 을 이용해 위치를 고정시키고, 자바스크립트를 이용해 스크롤을 따라다는 모양으로 만들어 줍니다.

배너 position:absolute;

故노무현 전 대통령 서거 당시 블로그에 많이 보였던 배너 형태입니다.
이렇게 브라우져의 한 부분으로 위치시킬 경우에도 포지션(position)을 사용합니다.

2. 포지션 (position) 이란?
포지션 (position)은 요소의 위치를 설정할때 사용합니다.
위의 예처럼, 자신이 원하는 위치에 설정할 수 있습니다.

포지션 (position)의 속성 값에는 absolute, relative, fixed, static, inherit  총 5가지가 있습니다.
그리고 위치 설정을 하기 위해서는 top, left, bottom, right 의 스타일을 추가해주면 됩니다.
예) position:absolute, top:20px; left:20px;  절대적인 위치로 위로부터 20px 왼쪽으로부터 20px 떨어진 위치에 고정됩니다.

static - 포지션의 기본값으로 위치 설정을 해줄 수 있습니다.
absolute - 절대위치
relative - 상대위치
fixed - 위치를 고정시킵니다. 브라우져의 스크롤을 이동해도 정해진 위치에 고정시킵니다.
inherit  - 부모의 속성을 상속시켜줍니다.

지금까지는 사전적인 의미입니다.

3. 포지션 (position) 예제
가장 많이 이용하는 absolute, relative, fixed 를 예제로 보여드리겠습니다.

포지션 (position)의 속성이 relative 일 경우에는 현재 위치에서의 상대적인 위치에 이동을 합니다.

포지션 (position)의 속성이 absolute 일 경우에는 두가지 형태로 나뉘게 됩니다.
absolute 된 엘리먼트의 상위 엘리먼트의 속성이 relative 인것과 아닌것으로 나뉩니다.
아닐 경우에는, 브라우져 (body) 를 기준으로 절대적인 위치를 가지게 되고,
상위 엘리먼트의 속성이 relative 일 경우에는 상위 엘리먼트를 기준으로 절대적인 위치로 이동합니다.


포지션 (position)의 속성인 fixed는 이미지에서 보는거와 같이 스크롤이 이동해도 항상 자신의 위치에서 이동이 없습니다. fixed 의 기준점은 브라우져 (body) 입니다. 그러므로, 브라우져의 스크롤을 이동하여도 브라우져가 기준점이기 때문에 이동하지 않습니다.

1.포지션(position)의 예에서도 보듯이, absolute의 속성을 많이 이용합니다.
relative는 주로, absolute 된 엘리먼트의 기준점으로 사용하기 위해 이용합니다.


신고
Posted by 별군

댓글을 달아 주세요

  1. leading area related partners retrieved comments caused

    2009.07.31 06:20 신고 [ ADDR : EDIT/ DEL : REPLY ]
  2. 좋은 정보와 자료에 감사드리고
    무덥죠 즐거우시길

    사랑합니다! 행복하세요!!

    2009.07.31 18:40 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 잘 보았습니다.
    예제 코드가 있었으면 좋았을텐데 아쉽군요 ^_^

    2009.11.19 15:59 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 방문감사드립니다^^
      이미지에 적혀있는 코드가 css 예제인데;; 더 쉽게 적어놓도록 하겠습니다^^ 궁금하신거 있으시면 언제든 물어봐주세요 :)

      2009.11.19 16:02 신고 [ ADDR : EDIT/ DEL ]
  4. ㄷㄷ

    전혀안되는데여;; position:absolute,top:230px;left: 530px; ????

    2012.10.30 18:30 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • position:absolute 다음에 세미콜론대신 콤마를 적어넣으셨네요.

      2014.03.23 11:46 신고 [ ADDR : EDIT/ DEL ]
  5. 지나가다가

    쉬운설명, 자세한 설명 감사합니다.^^

    2014.06.02 01:45 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바