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

div layer 위치 Javascript

승현
프로필 보기이 회원 글보기
 · 18년 전 · 5481 · 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를 접하는데 큰 도움이 되었습니다.

게시글 목록

번호 제목
11470
PHP 64비트용 php5.1
11469
PHP (win) xdebug와 xampp 사용하기
11468
PHP php debugger tool list
11457
기타 자연스러운 구름 만들기 10
29100
HTML 자연스럽고 간단한 Foggy 필터 효과 5
11448
기타 핑이 안되는 증상은? 8
11444
Flash 화이어폭스에서 플래시투명하게.. 3
24851
거래명세서(엑셀)
29091
HTML 포토샵팁 73가지 8
11440
기타 vista x64용 아파치 (비공식 사이트) 3
11434
JavaScript [팁]웹상이나 포토샵에서 이미지 작업시 필요한 색상이 따로 있는걸 아세요? 5
11431
PHP 계정별 register_global 설정 2
11420
기타 아쿠아틱볼만들기~ 10
11415
PHP apache log처리에 대해 4
11412
기타 404에러페이지로 2차도메인 만들기에 대한 질문입니다. 2
29087
HTML 일러스트 CS2에 있는 심볼들을 그림에 넣어보자!! 3
11408
기타 포토샵 쓸때 메탈재질의 느낌을 어떻게 표현해야하죠? 3
11402
기타 포토샵의 되돌리기 기능을 20단계 이상 올리는 방법 5
11397
JavaScript PHP에서 성능 개선을 위한 유용한 팁 4
11389
MySQL PHP 초보적인 질문인데 너무 궁금해서요 7
11387
기타 iptables ip 차단 1
11383
Flash 포토샵에 쓰이는 파일 정보 3
11375
기타 포토샵 고급으로 가는 첫걸음. 레이어 마스크 알기~ GO! GO! 7
11370
기타 사라진 폰트를 복구 하려면? 4
11362
기타 디카사진 보정효과 7
11354
JavaScript 강렬한 Sketch(스케치) 효과 7
11349
JavaScript 포토샵 단축키 모음 4
11348
JavaScript 셀렉트 박스 이뿌게 꾸미기
11347
JavaScript 데몬 Daemon 설명
11342
기타 불에 탄듯한 이미지. 4
11338
JavaScript 서버호스팅 트래픽 계산방법 3
29084
HTML 뒷배경을 채우기 2
11335
JavaScript APM 설치전 필수 라이브러리 다운로드 및 설치 2
11327
기타 모서리가 뜬 사진 틀 만들기 7
11325
JavaScript Alpha 채널을 이용하여 Halftone Dot Image 만들기 1
11318
Flash 플래시나 동영상파일에 "이 컨트롤을 활성화 하시려면........ 6
11312
기타 그림자 글씨 만들어 볼까요? 5
11308
기타 사진에 글시 쓰기 3
11303
PHP 이름기반 가상호스트 설정관련 질문입니다 4
11300
기타 이미지 합성하기 2
29077
HTML 부분 흑백 만들기 6
24849
간단하고 편리한 간이 영수증 1
29075
HTML 스크롤바 색상 변경해주는 소스 1
29070
HTML Outer Glow와 Inner Glow를 이용하여 투명 둥근 버튼(Glass Sphere) 만들기 4
11291
JavaScript 재미 있는 네비입니다. 8
11290
JavaScript mod_rewrite 를 적용하기 위한 http.conf 설정
11288
기타 트리아얼버젼 저장하는 방법 1
11285
JavaScript 잘 되던 포토샵이 갑자기 실행이 안될때 2
29068
HTML 단축기와 용어/팁 1
11282
JavaScript (급질..제발..)리눅스와 윈도우 멀티부팅에서 메뉴가 사라졌어요.커널 패닉문제 2
11279
기타 독특한 swish source 2
11271
Flash flash source 입니다 (네비) 7
11267
Flash 드디어 cs3 이 출시 했다고 합니다. 3
11264
기타 PHP 설정을 어떻게 할것인가? 2
11263
JavaScript [스크립트] 이미지 없는 둥글게 테두리 DIV
29064
HTML 한글패치의 삭제 방법 3
11256
기타 포토&#49406; CS에서 3D랜더 필터가 안될 때 6
11250
기타 CS버전을 깐 후 탐색기에서 PSD 미리보기가 안될 때 5
11244
JavaScript 왜곡과 수평 바로잡기 (동영상) 5
11238
기타 치아 미백효과(하얗게만들기) 5
11237
기타 파노라마 사진제작 (동영상)
11234
기타 포토샵강좌 / 인물 사진 간단하게 보정하기 2
29061
HTML 포토샵에서 갑자기 도구 모양이 이상하게 보일때 2
11231
기타 아이콘 이미지나 도트이미지의 크기를 줄이거나 확대해서 쓰고 싶을때... 2
11228
기타 하얀색이 노랗게 보일때 2
11226
기타 이미지 레디에서 움직이는 횟수조절하는 법 1
29056
HTML 플래쉬 인트로자동으로 로딩되게 4
11223
기타 브러시 또는 펜툴 사이즈 조절하기 2
11216
MySQL 익스플로러7 팝업창의 주소창 없애기 6
11214
기타 iframe에 관해서 1
24846
결혼정보 회원가입 신청서 2
11210
JavaScript 포토샵8.0cs 분할영역 도구로 일부 영역만 저장은 불가능 한가요? 3
11206
JavaScript 유용한 포샵단축키 3
11199
MySQL latin1_swedish_ci => utf8 로 변환 문의 6
11194
JavaScript 유용한 포토샵 강좌 사이트 4
11190
JavaScript Jpeg등으로 압축하지 않고 Photoshop파일 사이즈 줄이기 3
29052
HTML 특정레이어만 선택해서 보기 3
11188
기타 파일업로드 관련 질문?? 1
11182
기타 여러 장의 이미지를 한 번에 닫기 5
11178
JavaScript 포토삽을 초기화 하고 싶을때 3
29048
HTML 아이콘 이미지나 도트이미지의 크기를 줄이거나 확대해서 쓰고 싶을때 3
11171
Flash 플래쉬 네비게이션 질문입니다... 6
11163
기타 B.I(Brand Identity)가 뉘집아이? 7
11159
기타 심볼마크와 로고 3
11154
기타 C.I가 무엇에 쓰는 물건인고? 4
29047
HTML 파일에 이미지를 포함시키는 방법
29037
HTML 포토샵을 빨리 뜨게 하려면... 9
11149
JavaScript 포토샵에서 작업하다 글자 사이즈가 갑자기 커지거나 작아질 때..... 4
29036
HTML PDF 세션에 대한 원리 및 보안
11135
JavaScript 고급스런 색상 만들기 혹은 선택하기... 13
29032
HTML prototype.js 1.5 API Document PDF 3
11134
JavaScript 롤오버 자바스크립트입니다.
11129
JavaScript 포토샵 한영키 안먹을때..(다른 프로그램도 마찬가지..영구적용) 4
29031
HTML 아래에 있는 trim을 보다가 조금 수정해봤습니다.
11127
MySQL [펌] MySQL 3.23.52 -> 4.0.17 버전으로 업그레이드 설치하는법 1
29026
HTML 이미지 저작권 관련 설명 7탄 4
11119
기타 Royalty-Free(로얄티프리)는 공짜다?? 7
11115
Flash asp에서 이올라스 패치 해결방법 질문드립니다. 3
29020
HTML 이미지 저작권 관련 설명 6탄 5
11113
기타 이미지 저작권 관련 설명 5탄 1
이전 다음
전체 목록