div layer 위치 Javascript

승현

· 18년 전 · 조회 5479 5479 · 댓글 2 2

레이어 left,top .................................................

레이어 위치를 잡으려면 left,top 을 사용한다.

absolute에서 이 값을 사용하면 브라우저 창을 기준으로 위치를 잡기 때문에 기존 본문내용과 동 떨어져 따로 움직일 수가 있다. 특히 본문이 가운데 정렬일 경우 !!!

relative에서는 상위태그 기준이므로 상위태그내에서 항상 일정한 위치에 레이어가 놓이지만....

absolute 에서 레이어를 브라우저 기준이 아닌 항상 본문 내용의 일정한 부분에 위치시키고 싶다면 left, top 을 지정하지 않는게 좋은 방법이다!!!!!

■ absolute 에서 본문내용의 원하는 위치에 레이어 놓기

* 아래는 같은 레이어를 3개의 칸을 가진 테이블에 넣어본 것이다.
* table태그를 잘 활용하면 본문내용과 항상 일치하는 곳에 레이어를 사용할 수 있다.

* left ,top 설정 없음!

■ relative 에서는 본문내용 속에 레이어가 비집고 들어가므로 레이어 속의 내용이 그 사이에 들어와도 좋은 지를 보고 위치를 잡아야 한다.

* left,top 으로 상위태그 기준으로 위치를 줄 수 있다.

레이어 앞의 내용

레이어 뒤의 내용

레이어 앞의 내용

레이어 뒤의 내용

relative인 경우 아래 예제는 상위 태그인 td에서 left로 30, top 에서 30 떨어진 곳에 위치하게 된다.

left 값은 도움이 될 수 있지만 top 값은 내용과 이상한 배치가 일어날 수 있다.

[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

wooripet

프로필 보기 이 회원 글보기

18년 전

올.. 좋은.. 굿.. -_-;

garangnip

프로필 보기 이 회원 글보기

17년 전

잘 보고 갑니다. 처음 layer를 접하는데 큰 도움이 되었습니다.

게시글 목록

번호	제목	글쓴이	조회	날짜
11797	Flash 플래시 1 픽셀 정도 어긋나는 현상때문에요....... 6	뽀뺑이	2,972	18년 전
11796	기타 Progress 로딩바	yong	2,917	18년 전
29161	HTML 체크박스 전체선택 소스	yong	2,814	18년 전
11795	기타 텍스트 박스의 내용을 쿠키로 저장하는 스크립트 입니다.	yong	2,126	18년 전
11794	PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 2: PHP 애플리케이션을 프로파일링 하여 느려진 코드를 진단 및 빠르게 하기 (한글)	친절한서기	2,306	18년 전
11793	PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 1: opcode 캐시 소프트웨어로 성능과 처리량 높이기	친절한서기	2,859	18년 전
11789	MySQL Oracle 과연 대용량에만 사용가능할까? 3	사이버매치스틱	2,952	18년 전
11784	기타 Drag & Drop Sample 4	frotone	4,116	18년 전
29160	HTML window.print() div 를 이용한 부분인쇄	원철스	6,106	18년 전
11781	Flash 도와주세요.. 2	우띠	2,040	18년 전
11778	PHP SSL 관련 링크 2	관리자	2,175	18년 전
24966	휴가원_기업일반 1	예감	1,884	18년 전
24964	회의록_인사 1	예감	1,644	18년 전
24963	제안서 회사약식제안서_기타	예감	2,620	18년 전
24961	회계전표_회계 1	예감	1,681	18년 전
24960	확인서_경리	예감	1,551	18년 전
24950	제안서 홈페이지개발제안서_개발 9	예감	4,729	18년 전
24948	현금지출장_경리 1	예감	1,778	18년 전
24947	현금보관증_부동산	예감	1,828	18년 전
24946	프랜차이즈-체인점계약	예감	1,836	18년 전
24945	품의서_인사	예감	1,962	18년 전
24944	계약서 표준임대차계약서_부동산	예감	3,618	18년 전
24943	팩스전송용지_경리	예감	1,642	18년 전
24942	팩스기안문_인사	예감	1,515	18년 전
24941	투자관련협의서_영업	예감	1,345	18년 전
24940	퇴직증명서_인사	예감	1,849	18년 전
24939	퇴직서_총무	예감	1,897	18년 전
29158	HTML 셀렉트박스(체크, 라디오)를 PHP(ASP, JSP)에서 선택하는 방법 1	frotone	3,641	18년 전
11777	MySQL Logrotate	관리자	1,968	18년 전
11774	JavaScript startssl 자동실행 2	관리자	3,101	18년 전
11772	기타 4. 아파치 서버 설정하기 (보안, SSL) 1	관리자	4,725	18년 전
11771	기타 Apache SSL 보안 설치	관리자	2,856	18년 전
11770	MySQL mysql error code	관리자	8,040	18년 전
11769	MySQL Mysql - ErrCode	관리자	4,046	18년 전
11765	기타 [질문]그물효과패턴이라는데, 사용법은? 3	hanpedro	2,731	18년 전
11764	기타 날짜 맞추기	관리자	1,513	18년 전
11763	기타 httpd: Could not determine the server's fully qualified domain name, using 127.0.0.1 for Server Name	관리자	2,612	18년 전
11758	기타 웹 브라우저에서 가로 스크롤 안생기게 하기 4	port	5,029	18년 전
29148	HTML 괜찮은 레이어 팝업창 소스 9	산까치	5,209	18년 전
11752	기타 삽질하다 막혀버렸어요... ㅠㅠ 5	cncafe	2,082	18년 전
11747	기타 지우개 툴로 손글씨 쓰기-CS3 새로생긴 기능 4	mixdesign	4,344	18년 전
11746	기타 페도라 리눅스 네임서버 설치	곱슬최씨	4,086	18년 전
29147	HTML CS3의 새로운 기능 - Live Color 사용법	mixdesign	4,139	18년 전
11744	JavaScript 플래쉬 초보입니다...질문좀 ^^ 1	재간둥이	2,260	18년 전
11735	Flash 퀵메뉴 - 수정해서 쓰세요!^^ 8	블루스톤	4,182	18년 전
29145	HTML 각각의 툴에대한 옵션바의 수치를 기본설정으로 돌릴려면 1	mixdesign	2,164	18년 전
11733	기타 히든필드 처리하기 1	지앤미	3,272	18년 전
11731	JavaScript 경고창의 폰트 조절..... 1	지앤미	4,904	18년 전
11730	기타 [질문] action레이어 하나에서 버튼 클릭시 사진을 이동하게 할려고 하는데,,,	없습니다	1,944	18년 전
24937	기본이력서 1	오디세우스	3,400	18년 전
11728	기타 마지막으로 사용된 필터 한번 더 적용할때 단축키로 간단히 1	mixdesign	1,634	18년 전
11727	기타 JS 이용해서 동적으로 테이블 생성	관리자	2,732	18년 전
11725	기타 이동툴로 잠시 변환후, 원래의 툴을 사용하려할때 1	mixdesign	1,657	18년 전
11717	기타 포샵에서 한글이 안써지고 영어만 써질때가 간혹 있어여 7	오리7	2,703	18년 전
29138	HTML 원하는 물체만 쉽게 선택하는 툴은 없나요? 6	hanpedro	2,543	18년 전
11716	기타 열린 인터넷 소켓 리스트 출력하기	짱구000	1,545	18년 전
11715	JavaScript 특정 프로세스가 연 파일 보기.	짱구000	1,487	18년 전
11714	기타 특정 사용자 쫒아 낼때 사용하는 명령어	짱구000	1,731	18년 전
11711	기타 CS3 간단 리뷰 2	쪼이	2,233	18년 전
11710	Flash 플래시 파일명 대신 외부파일 호출	아가웹	2,003	18년 전
11708	Flash 플래시 파일명 대신 외부파일 호출 1	아가웹	2,373	18년 전
11700	MySQL mysql 원격접속방법 7	푸름빠덜	4,904	18년 전
11697	기타 대화 상자 닫지말고 Reset하자 2	mixdesign	1,813	18년 전
24936	취업추천의뢰서_인사	예감	1,249	18년 전
24935	출장보고서_영업	예감	1,368	18년 전
24934	출근부_노무관리	예감	1,329	18년 전
24933	추천서_인사	예감	1,070	18년 전
24932	총무_월말종합보고서	예감	1,062	18년 전
24931	창업사업계획(승인,변경승인)신청서	예감	1,398	18년 전
24930	차용증_기업일반	예감	1,354	18년 전
24929	지출결의서_경리	예감	2,345	18년 전
24928	주주명부_기업일반	예감	1,220	18년 전
24927	주식회사정관예제_창업	예감	1,599	18년 전
24926	계약서 주식양수도계약서_경리	예감	2,079	18년 전
24925	주문서_기업일반	예감	1,264	18년 전
24922	제안서 제안서_기업일반 2	예감	2,815	18년 전
24921	계약서 전세계약서_일반계약	예감	1,265	18년 전
24920	계약서 전세계약서_부동산	예감	1,641	18년 전
24919	재직증명서-현정관리	예감	1,490	18년 전
24918	재직증명서_기업일반	예감	1,443	18년 전
24917	재직증명서2_노무	예감	1,225	18년 전
24916	재직증명서2_기업일반	예감	1,067	18년 전
24915	계약서 장비임대 계약서_영업	예감	1,655	18년 전
24914	잔여퇴직급여-수당청구서_행정자치부	예감	1,093	18년 전
24913	계약서 자동차매매계약서-양도양수_일반계약	예감	3,609	18년 전
11696	기타 메뉴를 찾습니다	오리7	1,703	18년 전
11694	기타 히스토리 팔레트 그것이 알고 싶다!!! 1	mixdesign	1,780	18년 전
24912	자기소개서_인사	예감	1,104	18년 전
24911	인사고과표_기업일반	예감	1,844	18년 전
24910	이력서_기업일반	예감	1,090	18년 전
24909	위임장_기업일반	예감	1,163	18년 전
24908	영업보고서_인사	예감	1,008	18년 전
24907	영업_업무출장보고서	예감	995	18년 전
24906	영수증_기타	예감	1,082	18년 전
11692	PHP waterproof phpedit 무료 라이센스 얻는 법 1	hanpedro	2,565	18년 전
24905	영문재직증명서_회사	예감	1,534	18년 전
24904	영문이력서_개인	예감	1,627	18년 전
24903	영문이력서2_개인	예감	1,193	18년 전
24902	계약서 연봉제근로계약서	예감	1,860	18년 전
24901	계약서 연봉계약서-근로_기타	예감	1,506	18년 전

이전 다음

67 68 69 70 71

전체 목록