HTML DIV tag: 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)

※ 브라우저 창의 폭을 넓게 하여 스크롤을 해 보면 각 위치속성의 특징을 쉽게 볼 수 있다.
영역1 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="
position: fixed;
left: 0x;
top: 100px;
">
</div>
영역2 : Position: fixed

이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, right, bottom)로 주었다.

창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.

픽셀의 기준점은 창의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]
<div style="
position: fixed;
right: 20px;
bottom:20px;
">
</div>
영역3 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="position: absolute; left: 20px; top: 250px;">
</div>
영역4 : Position: relative

이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.

[태그 모양]
<div style="position: relative; left: 200px; top: 450px;">
</div>
영역5 : Position: absolute

이곳은 DIV영역이며, 위치속성을 절대위치(Absolute, right, bottom)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.

픽셀(px)의 기준점은 페이지의 오른쪽 아래 꼭지점과 DIV영역의 오른쪽 아래 꼭지점이다.

[태그 모양]
<div style="position: absolute; right: 20px; bottom: 600px;">
</div>




















































※ 위치속성이
절대위치(absolute)나
상대위치(relative)로 지정된 DIV영역이
다른 DIV 영역의 안에 들어 있다면,
픽셀(px)의 기준점은 그 상위 영역의 꼭지점이 된다.


>> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ...


도움이 되기를 바랍니다.