웹문서의 포지션닝
웹문서에서 위치는 크게 3가지로 요약된다
- 일반 흐름(normal flow)
- 플로트(float)
- 위치(position)
일반흐름 방식은 별도 지정이 없을떄 를 말한다. 엘리먼트를 우리는 블록엘리먼트와 인라인 엘리먼트로 구분 할 수 있는데 div ,p ,h1등은 하나의 블록을 차지한다. 하지만 strong, span같은 경우는 인라인 엘리먼트로 한줄에 표시된다.
포지션닝 :: 상대위치
원래의 위치로부터 지정한만큼 이동한다 그림에서 빈박스가 원래의 위치고 진회색이 지정하여 이동한 경우이다.
#box{
position: relative;
left:20px;
top 20px;
}
포지셔닝 :: 절대위치
상위엘리먼트중에서 가장가까운 엘리먼트의 위치를 기준으로 한다
만약 특별한 상위 엘리먼트가 없다면 문서전채를 기준으로 할것이다
#box{
position: absolute;
left:20px;
top 20px;
}
댓글