| 레이어 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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 24900 |
계약서
업무제휴계약서_인터넷
|
| 24899 | |
| 24898 | |
| 24897 | |
| 24896 |
견적서
수의계약 견적서_공사관리
|
| 24895 | |
| 24894 | |
| 24893 | |
| 24892 | |
| 24891 | |
| 24890 | |
| 24889 | |
| 24888 | |
| 24887 | |
| 24886 | |
| 11687 |
JavaScript
일러스트 미리보기 툴을 찾으시는 분들께..
4
|
| 24885 |
계약서
부동산 매매계약서
|
| 24884 | |
| 24883 | |
| 24882 |
계약서
물품매매계약서_계약
|
| 24881 |
계약서
물품구매 표준계약서_구매
|
| 24879 | |
| 24878 | |
| 24877 |
견적서
무역 영문견적서_회사
|
| 24875 |
기획서
마케팅 기획서_기업일반
1
|
| 24874 |
계약서
동업계약서샘플_일반계약
|
| 24873 |
계약서
대리점 계약서_일반계약
|
| 24872 | |
| 24871 | |
| 11683 | |
| 11662 |
Flash
그누보드용 플래시 최근게시물
20
|
| 11659 |
기타
인물 사진 보정하기
2
|
| 29136 | |
| 11647 |
JavaScript
왼쪽에 달면 좋을만한 소스
11
|
| 11644 | |
| 11641 |
JavaScript
최적의 해상도 설정법
2
|
| 11634 | |
| 11632 | |
| 29135 | |
| 11631 |
JavaScript
1px 라인 css와 2개이상 class 적용.
|
| 11628 | |
| 24870 | |
| 24869 |
계약서
기술제휴계약서_영업
|
| 24868 | |
| 24867 | |
| 24866 | |
| 24865 |
계약서
근로계약서_기업일반
|
| 24864 |
계약서
공증 채무승인계약서_채권
|
| 24863 | |
| 24862 |
계약서
고용계약서_총무
|
| 24861 | |
| 24860 |
계약서
계약서_부동산
|
| 11627 | |
| 24859 | |
| 24858 | |
| 24856 |
견적서
견적서_일반기업
1
|
| 24855 | |
| 24854 | |
| 24853 | |
| 24852 | |
| 29130 |
HTML
퀵마스크의 활용 예제
4
|
| 11625 |
JavaScript
익스플로러7 팝업창의 주소창 없애기
1
|
| 11622 | |
| 11617 | |
| 11604 | |
| 11596 | |
| 11591 | |
| 11586 | |
| 29128 |
HTML
외부필터 설치하기
1
|
| 11583 | |
| 11579 | |
| 11578 | |
| 11574 |
MySQL
MySQL 한글 매뉴얼
3
|
| 11566 |
Flash
swf파일에 링크 걸려면??
7
|
| 11565 | |
| 11562 | |
| 11561 |
MySQL
PHP 5.2.0 설치시 MySQL 문제
|
| 29125 |
HTML
움직이는 사진에 효과 넣을때
2
|
| 11558 |
기타
필름효과내기
2
|
| 11556 |
JavaScript
한글폰트가 안 보일때...
1
|
| 11533 |
Flash
국내지도 소스입니다.
22
|
| 11529 |
JavaScript
회전목마 - 스크롤링 소스
3
|
| 29118 |
HTML
포토샵 효과 모음2
6
|
| 11526 |
기타
포토샵 효과 모음
2
|
| 11519 |
JavaScript
[팁] 물방울 효과2
6
|
| 29115 |
HTML
[팁] 물방울 효과
2
|
| 11518 |
MySQL
official 64bit mysql
|
| 11516 | |
| 11515 | |
| 11509 |
JavaScript
CS2에서 포토샵 PSD파일과 일러스트 AI파일 미리보기 기능
5
|
| 11508 | |
| 29112 |
HTML
HTML 사전입니다.
2
|
| 11496 | |
| 29109 | |
| 29106 | |
| 11495 | |
| 11488 |
JavaScript
Ajax가 뭐죠?
6
|
| 11486 | |
| 11483 | |
| 11471 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기