DIV 영역의 위치 지정하는 방법과 스크롤 - 절대위치(absolute), 상대위치(relative), 고정위치(fixed)
8년 전
영역1 : Position: fixed
이곳은 DIV영역이며, 위치속성을 고정위치(Fixed, left, top)로 주었다.
창이 스크롤되어도 이 영역은 같이 스크롤되지 않고 고정되어 있다.
픽셀(px)의 기준점은 창의 왼쪽 위 꼭지점과 DIV영역의 왼쪽 위 꼭지점이다.
<div style="position: fixed;left: 220x;top: 200px;"></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: 210px; top: 100px;"></div>
영역4 : Position: relative
이곳은 DIV영역이며, 위치속성을 상대위치(Relative, left, top)로 주었다. 창이 스크롤되면 이 영역도 같이 스크롤된다.
픽셀(px)의 기준점은 <div>태그가 있는 바로 그 지점과 DIV영역의 왼쪽 위 꼭지점이다.
<div style="position: relative; left: 210px; top: 400px;"></div>
추천 : 