테스트 사이트 - 개발 중인 베타 버전입니다
SIR

div layer 위치 Javascript

승현
프로필 보기이 회원 글보기
 · 18년 전 · 5482 · 2
레이어 left,top .................................................

레이어 위치를 잡으려면 left,top 을 사용한다.

absolute에서 이 값을 사용하면 브라우저 창을 기준으로 위치를 잡기 때문에 기존 본문내용과 동 떨어져 따로 움직일 수가 있다. 특히 본문이 가운데 정렬일 경우 !!!

relative에서는 상위태그 기준이므로 상위태그내에서 항상 일정한 위치에 레이어가 놓이지만....

absolute 에서 레이어를 브라우저 기준이 아닌 항상 본문 내용의 일정한 부분에 위치시키고 싶다면 left, top 을 지정하지 않는게 좋은 방법이다!!!!!



■ absolute 에서 본문내용의 원하는 위치에 레이어 놓기

* 아래는 같은 레이어를 3개의 칸을 가진 테이블에 넣어본 것이다.
* table태그를 잘 활용하면 본문내용과 항상 일치하는 곳에 레이어를 사용할 수 있다.

* left ,top 설정 없음!
<div id="Layer1" style="position:absolute; width:100px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;"></div>






■ relative 에서는 본문내용 속에 레이어가 비집고 들어가므로 레이어 속의 내용이 그 사이에 들어와도 좋은 지를 보고 위치를 잡아야 한다.

* left,top 으로 상위태그 기준으로 위치를 줄 수 있다.
<div id="Layer2" style="position:relative; width:200px; height:50px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;" left:0 ; top:0></div>

레이어 앞의 내용
레이어 뒤의 내용

<div id="Layer2" style="position:relative; width:200px; height:80px; z-index:1; border: 1px dotted #ff33ff; visibility: visible;" left:30 ; top:30></div>

레이어 앞의 내용
레이어 뒤의 내용




relative인 경우 아래 예제는 상위 태그인 td에서 left로 30, top 에서 30 떨어진 곳에 위치하게 된다.

left 값은 도움이 될 수 있지만 top 값은 내용과 이상한 배치가 일어날 수 있다.
[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

wooripet
프로필 보기이 회원 글보기
 18년 전
올.. 좋은.. 굿.. -_-;
garangnip
프로필 보기이 회원 글보기
 17년 전
잘 보고 갑니다. 처음 layer를 접하는데 큰 도움이 되었습니다.

게시글 목록

번호 제목
12201
Flash [초간단]버튼클릭하면 무비클립이 나오게 하고싶어요..
12200
기타 www 자동으로 붙이기
29244
HTML [다운로드] Ajax 기반 웹 2.0 플랫폼 '웹스퀘어' 2
12196
Flash [질문]플래시 위즈위드 메뉴 효과 방법 부탁드립니다. 3
29243
HTML 핑백을 구현하는 방법을 알고싶어요....
12188
Flash 플래시 ActionScript 3.0 프로그래밍 한글 도움말 pdf 7
12184
Flash Open Flash Chart 3
29231
HTML 타이틀 이미지 만드는 방법 11
29230
HTML 리코
12181
기타 툴팁 2
29229
HTML [해결방법] 인터넷 사이트를 열 수 없습니다. 작업이 중단되었습니다.
12179
기타 [펌] IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6. 1
12177
기타 [펌] yum update관련 오류 수정 LINUX 1
12173
Flash 서서히 늘어나는 리사이즈 팝업창 3
29226
HTML 레이어 전환 효과 주기 [IE 전용] 2
12172
정규표현식 자바스크립트 sort()를 이용한 숫자 정렬
25007
간이영수증 양식 2
12171
JavaScript DOM 이용 select box 옵션추가삭제
12170
기타 유용한 팁(일련번호 관련)
29225
HTML 실수로 지운 데이터 살리기..
12167
기타 [질문] UTF-8 ajax회원가입 폼이 안됩니다. 2
12166
JavaScript 아이디 중복체크
12157
기타 빈티지 효과만들기 8
12154
MySQL 그누보드 통합검색 방법... 2
12153
기타 input 테그에서 숫자만 입력 받고 자동 콤마 적용되는 소스
25002
뉴스레터 초안입니다. 4
12151
기타 웹프로그래밍 언어별 인클루드방법!!( 1
29224
HTML 이미지를 갤러리 형태로 [클릭하면 딱 맞는 창으로]
12148
JavaScript 심플한 드롭다운 레이어 메뉴 (2단계 메뉴 구성) 2
29223
HTML 자바스크립트를 이용한 슬라이드 형식 갤러리
12142
기타 리눅스에서 하드웨어 정보확인하는방법 (간단!) 5
29217
HTML 여기에 올려되겟는지 모르겟네요 zip파일 풀기. 1
12141
JavaScript 날짜 관련 쿼리 입니다. 한달을 요일별로 구함..
12136
MySQL linux 웹 호스팅시 가장 많이 쓰이는 명령어 정리^^ 4
12132
MySQL 리눅스랑 유닉스 mysql password함수 저장 틀려요.. 3
12130
MySQL 테이블 깨졌거나 복구 할때 간단한 팁. 1
29216
HTML Table생성 스크립트 파일 뽑아내기
29215
기타 Windows에서 오라클 완전히 삭제 하기..
12126
기타 [기술문서] prototype.js에 대한 좋은 자료가 있어 올립니다 3
12124
JavaScript 마우스 오버시 그림 변하게 하는 스크립트 소스 1
12122
기타 ip 조회하는 스크립트 1
12120
PHP 웹 서버를 이용한 인증 1
12111
JavaScript div 사이즈 5픽셀로 하기. -_- 8
25001
영업활동보고서
25000
고객관리일보!!
24999
거래처별 매출 집계표
24998
일일판매보고서
24997
편리한 거래명세표 양식
24994
제안서 각종 기획, 제안서 , 사업계획서 등 편리한 자료입니다. 2
24985
제안서 홈페이지 제안서, 기획서 사용 시 유용한 자료!! 8
12109
기타 넣을 분류를 찾지 못해 여기에 넣습니다.(사이트별 자동로그인 주소) 1
12105
Flash [질문]플래시 CS버전에서 Instance Name~~!! 3
12104
기타 libphp4.so: cannot restore segment prot after reloc: Permission denied　
12096
Flash apache에서 이미지 캐싱 처리(mod_expires) 7
12094
기타 [펌] EUC-KR -> UTF-8 파일명 변경 1
12091
기타 대용량 파일 업로드 모듈 2
12090
MySQL 리눅스 mysql 에서 백그라운드 실행
12079
JavaScript 거리에서 찍은 인물사진 더 멋있게- 10
29211
HTML 낡은 포스터효과를 내어보자 3
12072
기타 돌아가는 글자 6
29210
HTML 구멍난 자바스크립트 보안
12070
기타 꽃 만들기 (반복 복사 및 메쉬사용 예) 1
29207
HTML 올가미툴에 대해 배워보자 2
12067
JavaScript div layer 위치 Javascript 2 현재글
12061
기타 매끄러운 투명 립글로즈 입술 표현하기!! 5
29204
HTML 한글패치 삭제하는 방법 2
12058
기타 Windows Server 2003 에서 Photoshop cs3 설치방법 2
12057
기타 HTTP 인증(Basic타입)이 걸린 URL을 fsockopen에서 여는 방법
12056
PHP php로 엑셀파일 만들기
24984
축의결혼부의부조봉투
12055
JavaScript lampp 스타트 간단명령
12053
JavaScript 중앙정렬 사이트에 영향없이 오른쪽 배너 붙이기 1
12051
MySQL apm 1
12050
MySQL LOG
12049
기타 OpenSSH(Open Secure SHell)
12048
기타 dhcp
12047
Linux X 윈도우
12046
Linux BOOT PROCESS
12045
Linux Linux 명령어 사용방법
12044
기타 kernel compile
12043
JavaScript vi
12042
기타 Nis/NFS
12041
PHP User Management
12040
JavaScript 쉘
12039
기타 Process
12038
Linux 파일 시스템
12037
Linux programming
12036
Flash 시스템 튜닝
12035
JavaScript Quota
12034
MySQL LOG
12033
기타 IP_Masquerading Configuration
12032
Linux 메모리
12031
JavaScript IPCHAINS
12028
MySQL Eclipse PDT 1.0 정식 릴리즈판 그누연동하기. 2
12026
Linux linux + samba 1
12025
Linux 압축 그리고 백업( Backup)
12020
기타 폰트 한글표기로 보기 4
12017
기타 이미지 사진 만들기 예쁜얼굴 만들기 2
12015
기타 이미지파일정보 1
12013
기타 아쿠아버튼 1
이전 다음
전체 목록