본문 바로가기
CSS

CSS&HTML 포지셔닝

by 샷타이거 2009. 9. 2.

웹문서의 포지션닝

웹문서에서 위치는 크게 3가지로 요약된다

  • 일반 흐름(normal flow)
  • 플로트(float)
  • 위치(position)

일반흐름 방식은 별도 지정이 없을떄 를 말한다. 엘리먼트를 우리는 블록엘리먼트와 인라인 엘리먼트로 구분 할 수 있는데 div ,p ,h1등은 하나의 블록을 차지한다. 하지만 strong, span같은 경우는 인라인 엘리먼트로 한줄에 표시된다.

포지션닝 :: 상대위치

원래의 위치로부터 지정한만큼 이동한다 그림에서 빈박스가 원래의 위치고 진회색이 지정하여 이동한 경우이다.

#box{
position: relative;
left:20px;
top 20px;
}

포지셔닝 :: 절대위치

상위엘리먼트중에서 가장가까운 엘리먼트의 위치를 기준으로 한다

만약 특별한 상위 엘리먼트가 없다면 문서전채를 기준으로 할것이다

#box{
position: absolute;
left:20px;
top 20px;
}

댓글