태그 자료실

회원로그인

무료회원가입 보안로그인

아이디/비밀번호찾기

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>

추천 목록

번호	제목
2,615	클릭시 url 복사하기
2,614	CSS Hover 를 이용한 깔끔한 페이징
2,613	스크롤해도 상단에 고정되는 메뉴 만들기
2,612	[정규표현식] php 문자열에서 숫자만 추출
2,611	HTML5 Video/Audio CurrentTime/Ended 문제점
2,610	audio 엘리먼트의 onplay 이벤트 처리 시 주의사항
2,609	PHP - $ SERVER 환경변수
2,608	Example #1 print 예제
2,607	php `/`기준으로 자르기
2,606	php 문자열 함수
2,605	주소등 인코딩해서 보내기
2,604	jquery load() 메소드 (비동기 웹페이지 로드)
2,603	[Ajax] ajax 예제2
2,602	[Ajax] ajax 예제1
2,601	[Ajax] JSON (Javascript Object Notation) 사용하기
2,600	[jQuery] jQuery.ajax() HTTP 비동기 데이터 교환
2,599	[jQuery] jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() 이해하기
2,598	IE6~7 문제해결
2,597	Windows Media Player 제어
2,596	나눔고딕 구글 웹폰트(Webfont) 사용하기
2,595	PHP 문자열 나누기 - explode()
2,594	[PHP] ceil() , floor(), round() 함수
2,593	PHP split 함수를 이용한 문자열 분리
2,592	[CSS] :before,:after 활용하기 - 구분선
2,591	CSS border-image 속성
2,590	jquery 기본문법
2,589	[자바스크립트] 서서히 나타나고 사라지는 창
2,588	php에서 이미지 파일을 랜덤하게 불러오기
2,587	php에서 sendmail 테스트 하기
2,586	php의 number format 함수 - 숫자를 천단위로 구분