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

div layer 위치 Javascript

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

게시글 목록

번호 제목
12452
JavaScript 마우스를 따라다니는 그림
40
네이버 처럼 실시간으로 신문사로 신문기사 받아오기.. 2
25015
ASCIIcode표 1
12447
Flash [질문] 랜덤으로 움직이는 무비클립을 영역밖으로 이동할 수 있는 방법이 있을까요? 4
12446
JavaScript SQLPLUS & PLSQL 기초
12445
JavaScript PLSQL이란
29296
HTML 동적 INPUT 박스
12440
기타 메뉴 4
12438
Flash 창밖에 풍경 1
12437
JavaScript 우분투 root관리자 접속 방법 (펌)
29294
HTML 우키막기 1
35
latest() sql 4
32
고수님들! 해결 좀 부탁드립니다. 메인화면에 공지사항이 안보이네요~~ 2
12434
JavaScript tar로 묶을때 특정 디렉토리나 파일 포함하지 않고 묶기 2
12433
Flash 도스상에서 플렉스 사용하기
12432
기타 INPUT 숫자만 입력받기
29293
HTML 컨텐츠 팝업 출력 소스
29
[php질문]세션 로그아웃되는 문제 (php소스에서처리가능한가요?) 2
12431
jQuery selectbox 대용으로 사용가능한 jquery popup 플러그인
12428
기타 플래쉬 주변이 점선이 생기는 것을 막아줍니다. 2
12421
jQuery JQuery + wSlide 를 이용한 슬라이딩 6
29292
HTML 시계
12411
기타 CSS hack 정리 9
12402
jQuery JQuery + JQchart + Canvas 로 라인 그래프 그리기 8
27
헉........ 1
29290
HTML 금액입력시 한글로 변환하여 표시 1
12400
Flash [질문] 페이지 인식 시킬때 플래시 테두리 회색라인 1
24
플래쉬파일로 2
12397
PHP 이번 달 달력 출력 2
12396
JavaScript 동적 테이블 추가,삭제
21
서버에러메세지 관련 질문입니다 2
12391
Flash 웹페이지 미리보기 snapshot 활용하기 4
12390
기타 랜덤 배너(가로/세로)를 출력하는 php source
18
php질문좀 하겠습니다. 2
16
듀얼 모니터에서 A모니터와 B모니터 풀화면으로 창을 여는 방법이 없을까요? 1
12377
Flash 쇼핑몰에서 많이 쓰는 자동 슬라이드 12
12373
Flash [질문] 이 책장을 넘기는 효과의 플래시효과는 어떻게 구현하는걸까요? 3
13
소스 syntex error 질문입니다.(초초보) 2
9
소스 php 질문(초초보) 3
12372
Flash 프로그램 소개:: php등 source code library
12371
기타 javascript 로 구현한 php 함수
12363
MySQL 서버에서 mysql euckr과 utf8 같이 사용하기 7
1
어떻게 하면... 7
13432
PHP php5.3 으로 업그레이드 했는데 그누보드가 안뜨네여.. 1
12362
JavaScript vista에서 한글 php 매뉴얼 chm파일이 안 보일&#46468;
12360
기타 홈페이지에 쓸만한 자바스크립트 1
12355
기타 리눅스 실시간 트래픽 모니터링 하기 4
25014
대학교 - 프로그래밍 결과 보고서
29287
HTML 광각렌즈로 촬영한 사진 왜곡현상 보정하기-동영상강좌 2
12352
기타 히스토리 브러쉬를 이용해서 특정부위만 강조-동영상강좌 2
12349
기타 레벨과 블렌딩모드로 노을사진 만들기-동영상강좌 2
29279
HTML 기상청 날씨정보 XML 7
12344
기타 네이버로그인 4
12340
기타 홈페이지에 날씨배너 삽입하기 (케이웨더) 3
12335
기타 xml 연동 웹상에서 이미지 안보일때... 도와주세요 4
12333
기타 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. 1
12331
기타 자신의 홈피에 통합 검색 순위 (검색어, 음악, 영화, 도서)를 달아보자. 1
29273
HTML 자신의 홈피에 날씨를 달아보자. 5
12330
PHP 세션만을 이용한 현재 접속자. 로케이션 표시
12329
기타 [펌] ant & red5 설치법
12328
MySQL [펌] 리눅스에 java(자바) 와 tomcat(톰켓) 설치
12324
JavaScript 홈피 사진 올리는법 사진줄이 는법 3
12323
MySQL MySQL 자동으로 dump 받기
12318
MySQL 쿼리문 해석좀 부탁드립니다 4
12316
기타 이번주 일~토 날짜 출력~ 1
12313
JavaScript 이미지에 박스 넣기 2
12310
Flash [펌] RED5 파헤치기 2
12309
JavaScript php 파일을 html 확장자로 사용하기
12307
JavaScript 아파치 보안 팁 [외부에서 아파치정보 못 보게하기] 1
12303
기타 리눅스서버 보안팁 [tmp 보안세팅] 3
12296
JavaScript SSH 공격막아내기 방법 1 6
12291
MySQL php 보안팁 [php.ini] - 필수보안 사항 4
12280
Flash 플래시 배너 소스 10
12277
PHP 디렉토리 내의 이미지보기(겔러리) 소스 입니다. 2
12275
MySQL [펌] 사용자 계정 트래픽 제한 하기 1
29272
HTML JavaScript MD5 사용하기~
12274
기타 휠로 이미지 크기 제어
12260
Flash 구글 날씨 api를 이용한 날씨 보여주기 13
12252
기타 무료 설치형 웹하드 큐하드(베타) V1.0 7
12250
MySQL [펌] FTP 서버 보안, 이것만은 꼭 챙깁시다. 1
12248
JavaScript fedora core 3에서 GPG-KEY 를 다운로드 받지 않고 yum update하는 방법 1
29267
HTML ZMLSE(자랩메타로컬검색엔진) 무료소스 4
12245
기타 세션을 기준으로 한 간단한 현재 접속자 2
29266
HTML 드림위버에서 html소스를 최적화시키기
29261
HTML 그림안에 투명텍스트박스 넣기... 4
12239
Flash 플래시점선없애주는 자바스크립트 5
12238
Flash [질문] 플래시 테두리 제거 질문이요..ㅠㅠ
29251
HTML 숫자 100이하 절사 9
12236
기타 이메일 추출만 하고싶습니다!!!! 1
12231
기타 내사이트에 '네이버 하루 동안 가장 많이 본 뉴스' 를 달자...... 4
12228
기타 답변]버튼클릭하면 무비클립이 나오게 하고싶어요.. 2
12214
정규표현식 [펌] PHP 코드를 최적화하는 40가지 팁 (번역) 13
12211
Flash 플래시무비를 EXPLORE 창에서 한번 클릭 하여야 프리시 버튼이 작동 합니다. 2
12210
MySQL ..)아랫님.. mysql 버젼확인 (SQL문장)..More
29248
HTML 웹컬러(WebColor) 를 RGB 로 변경 2
29247
HTML 유닉스계열의 쉘 명령어 중에 디렉토리 용량을 체크하는 프로그램
25010
사이트 가입 리스트 3
12208
JavaScript file_put_contents() 함수 1
12207
MySQL bash shell의 환경설정 의미와 그 예
12202
MySQL [질문] ssh에서 mysqldump명령어 4
이전 다음
전체 목록