div layer 위치 Javascript
| 레이어 left,top ................................................. 레이어 위치를 잡으려면 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를 접하는데 큰 도움이 되었습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 11111 | |
| 11108 | |
| 11107 | |
| 11105 |
JavaScript
이미지 저작권 관련 설명 1탄
1
|
| 11101 |
Flash
초간단 플래시테두리 없애는 방법입니다.
3
|
| 11099 |
JavaScript
직접만든 자바스크립트 Trim 함수입니다.
1
|
| 11095 | |
| 11093 | |
| 24843 | |
| 11065 | |
| 11063 | |
| 11059 |
JavaScript
PHP Ajax 프레임워크
3
|
| 29001 | |
| 11054 |
JavaScript
일반PC로 서버 만들경우....
4
|
| 28999 | |
| 11050 | |
| 28998 |
HTML
mshtml.dll error 발생시
|
| 28956 | |
| 11044 | |
| 11023 |
JavaScript
[입문자용 강좌] 상수?
20
|
| 11004 | |
| 28946 |
HTML
[입문자용강좌] 변수란?
9
|
| 10993 | |
| 10990 | |
| 28903 | |
| 10984 | |
| 24842 |
계약서
고용계약서
|
| 28900 |
HTML
marquee 태그 활용법
2
|
| 10982 | |
| 10978 |
JavaScript
실제 이미지 크기 알아내기
3
|
| 28899 | |
| 10974 |
Flash
플래쉬 투명바탕 어떻게 하는거죠?
3
|
| 10970 | |
| 24831 | |
| 24830 |
계약서
표준임대차 계약서
|
| 10967 |
JavaScript
ie,firefox alpha값
2
|
| 10965 | |
| 10963 | |
| 10956 |
JavaScript
왕초보 소스 중 질문있어요...^^;
6
|
| 10954 |
Flash
플래시 그림판 소스 입니다.
1
|
| 10950 |
Flash
[펌]겔러리에 적용하면 괜찮은 소스
3
|
| 10946 | |
| 24818 |
견적서
홈페이지 견적서입니다
11
|
| 10943 |
Flash
플래시 활성화 영역 안나오게 하기...
2
|
| 28885 |
JavaScript
외부의 이미지를 자신의 서버경로에 썸네일 만드는 방법
13
|
| 24813 | |
| 10940 | |
| 10927 |
JavaScript
포토샵질문드려요.
12
|
| 10925 |
Flash
FLEX 참고자료 URL
1
|
| 10920 |
JavaScript
이동도구(v)팁
4
|
| 10916 | |
| 10914 | |
| 10913 |
기타
FLEX 란?
|
| 10908 |
Flash
플래시 플레이어 오류발생할 때 패치
4
|
| 10905 | |
| 10904 | |
| 10899 | |
| 24803 | |
| 28882 |
HTML
링크클릭시 나타나는 점선 없애주기
2
|
| 10898 |
Flash
간단한 퀵메뉴
|
| 28878 |
기타
Ajax 마스터하기
3
|
| 28877 | |
| 24802 | |
| 24801 | |
| 24800 | |
| 24799 | |
| 10893 | |
| 10892 | |
| 24797 | |
| 24794 | |
| 10891 |
Flash
정상적인 사운드가 빠르게 재생될때
|
| 28871 |
HTML
id와 class의 차이점?
5
|
| 28870 | |
| 10881 |
MySQL
평가 표시 ★☆로 할 때
9
|
| 10872 | |
| 10870 | |
| 28868 | |
| 10868 |
JavaScript
3D 회전식 메뉴입니다. 드레그해서 붙혀서 사용해보세요
1
|
| 10866 | |
| 28862 |
HTML
Ajax로 만든 쇼핑몰입니다.
5
|
| 10864 |
기타
랜덤백그라운드
1
|
| 28861 |
HTML
마소 컬러 선택 대화상자
|
| 10863 |
기타
회원에게만 보여준다
|
| 28860 |
HTML
KOSDAQ소스
|
| 10862 |
JavaScript
ZDNet Korea레이어
|
| 28859 | |
| 28858 | |
| 10861 |
JavaScript
present[다음에서 발췌]
|
| 10859 | |
| 28856 |
HTML
클릭한 메뉴 고정하기
1
|
| 10857 |
JavaScript
클릭시 화면이 위로 올라가는 현상 막아주기
1
|
| 28854 | |
| 10856 |
기타
쿠키1년간체크
|
| 28853 |
HTML
자막파일(.smi) 싱크밀고 당기기
|
| 28852 |
JavaScript
일정시간동안 이미지 자동으로 변경하기
|
| 28851 |
HTML
이미지 파일 에러 처리
|
| 10855 |
JavaScript
이미지 미리 로딩시켜놓기
|
| 28850 |
HTML
웹로봇 배제 표준
|
| 10854 | |
| 28849 |
HTML
아이프레임하나만 새로고침하기
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기