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를 접하는데 큰 도움이 되었습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12828 |
JavaScript
최근 게시물 디자인
5
|
| 254 | |
| 252 | |
| 25062 | |
| 29368 | |
| 249 | |
| 243 | |
| 239 | |
| 236 | |
| 234 | |
| 12821 | |
| 12818 |
Flash
플래쉬 매뉴 소스 실무_
2
|
| 12815 | |
| 12811 |
기타
플래쉬 매뉴 소스
3
|
| 12807 |
JavaScript
플래쉬 매뉴 소스
3
|
| 12797 | |
| 12787 | |
| 12781 | |
| 12780 |
JavaScript
자동글 방지 팁입니다.
|
| 232 | |
| 12779 |
기타
PHP 에서의 디버그
|
| 12776 | |
| 12768 | |
| 12767 | |
| 229 | |
| 12764 | |
| 226 | |
| 12762 |
JavaScript
팝업창 중앙에 띄우기 소스
1
|
| 12758 |
JavaScript
<tip>초간단 위로가기 소스
3
|
| 12757 |
JavaScript
소스 <퀵메뉴>
|
| 12755 | |
| 223 | |
| 221 | |
| 12746 | |
| 219 | |
| 212 | |
| 12745 | |
| 210 | |
| 206 | |
| 29366 | |
| 205 | |
| 12743 | |
| 203 | |
| 29364 |
HTML
클릭하면 이미지 서로 바꾸기.
1
|
| 201 | |
| 12742 |
JavaScript
/var/log/secure 로그를 이용한 IP Deny 자동 등록
|
| 29361 | |
| 12740 |
Linux
여러가지 리눅스 팁들
1
|
| 199 | |
| 198 | |
| 196 | |
| 12738 | |
| 12735 |
JavaScript
포토샵으로 쌍꺼풀 만들기
2
|
| 12732 | |
| 195 | |
| 194 | |
| 12731 |
JavaScript
특정 이메일 입력 금지및 이메일 유효성 검사
|
| 191 | |
| 188 | |
| 185 | |
| 182 | |
| 179 | |
| 25053 | |
| 25052 | |
| 12729 | |
| 25050 | |
| 176 | |
| 174 | |
| 172 | |
| 171 | |
| 168 | |
| 166 | |
| 12724 | |
| 12715 |
Flash
xml 연동mp3 플레이어 제작소스
8
|
| 164 | |
| 12712 | |
| 12702 |
Flash
xml 연동형 겔러리소스입니다
9
|
| 159 | |
| 12697 |
Flash
이미지마스크
4
|
| 29360 |
HTML
메트릭스글자
|
| 12696 | |
| 155 | |
| 12694 | |
| 12692 | |
| 12689 | |
| 12687 | |
| 12685 | |
| 12683 |
Flash
Flex 및 Flash 래퍼런스 활용
1
|
| 12679 | |
| 12678 |
기타
픽토그램 소스
|
| 12676 |
JavaScript
[일러스트강좌] 마크 그리기
1
|
| 151 | |
| 12669 | |
| 148 | |
| 146 | |
| 144 | |
| 143 | |
| 29356 | |
| 12662 |
JavaScript
html,php,js.vbs,각종 암호화
6
|
| 12655 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기