중앙에 있는 페이지에서 레이어를 사용할 때 가장 큰 문제는 레이어의 위치 지정입니다. 디스플레이 해상도가 변경되면 다른 중앙에 있는 요소를 기준으로 레이어의 위치가 변경됩니다. 이 문서에서는 레이어가 다른 중앙 요소에 비해 잘못 정렬되지 않도록 하는 방법을 소개합니다.
레이어의절대 위치 지정 및 상대 위치 지정
레이어의 절대 위치 지정 코드:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
레이어의 상대 위치 지정 코드:
<div id="Layer1" style="position:relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
중앙 페이지에 상대 위치 지정 레이어 코드를 삽입하면 레이어 위치가 페이지 중앙이 됩니다. 하지만 움직이지 않고 사용하기 불편해졌습니다.
절대 위치 지정 코드를 삽입하세요. 왼쪽과 위쪽에 양수 값과 음수 값이 포함되어 있으면 레이어를 중앙에 맞출 수 없습니다. 왼쪽 및 위쪽 속성이 지워지면 레이어가 가운데에 배치될 수 있으며 페이지의 다른 가운데에 있는 요소에 비해 정렬 오류가 없습니다.
그리기 레이어와 삽입레이어
의 차이점
중앙 페이지에서 레이어를 렌더링하는 코드를 사용합니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<제목>div</제목>
</head>
<본문>
<div id="Layer1" style="position:absolute; left:40px; top:30px; width:265px; height:75px; z-index:1"></div>
<div align="center"></div>
</body>
</html>
삽입 레이어 사용:
중앙 페이지에서는 삽입 레이어 코드를 사용합니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<제목>div2</제목>
</head>
<본문>
<div 정렬="중앙">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</body>
</html>
"그리기 레이어"를 사용하여 생성된 코드는 센터링 코드에 포함되지 않으므로 레이어가 센터링된 페이지의 다른 요소에 비해 잘못 정렬되지 않도록 하려면 삽입 레이어를 사용해야 합니다.
중앙 페이지에서는 다른 중앙 요소에 비해 레이어가 잘못 정렬되지 않았는지 확인하기 위해 두 가지 방법이 일반적으로 사용됩니다.
삽입 레이어 사용
1. 중앙 페이지에서 문서에 삽입 포인터를 놓습니다. 예에서는 삽입 포인터를 표에 놓습니다.
2. "삽입"/"레이어" 메뉴를 선택합니다.
3.문서에 레이어가 삽입됩니다. 이 예에서는 레이어가 테이블에 삽입됩니다. IE 브라우저에서 테스트하고 해상도를 변경하면 레이어의 콘텐츠가 다른 중앙 요소에 비해 잘못 정렬되지 않습니다.
속성 패널에서 이 레이어의 속성을 확인하세요. 이 삽입된 레이어는 "왼쪽" 및 "상단" 값을 지웁니다.
이 방법은 팝업 메뉴를 만드는 데 자주 사용됩니다.
중첩 레이어 사용
중첩 레이어는 코드가 다른 레이어 내에 포함되어 있는 레이어입니다.
중첩된 레이어를 사용하기 전에 먼저 레이어에 대한 일부 매개변수를 설정해야 합니다. "편집"/"기본 설정" 메뉴를 선택하고 "기본 설정" 대화 상자에서 "Netscape 4 호환성: 레이어 삽입 시 고정 크기"를 선택하면 생성된 중첩 레이어가 Netscape 4 브라우저와 호환될 수 있습니다. 그리고 "네스팅: 레이어에 있는 경우 네스팅 사용"을 선택하세요.
레이어 패널을 열고 "겹침 방지"를 선택 취소하세요.
중첩 레이어:
중앙 페이지에 테이블을 삽입하고 테이블에 레이어를 삽입합니다. 이 레이어는 테이블을 기준으로 잘못 정렬되지 않습니다. 이 레이어에서 "삽입"/"레이어" 명령을 사용하여 하위 레이어(중첩 레이어)를 삽입합니다. 페이지에서 이 하위 레이어를 어떻게 이동하더라도 해당 위치는 중앙에 있는 다른 요소를 기준으로 이동되지 않습니다.
삽입된 레이어에 중첩된 여러 레이어를 삽입한 후 중첩된 레이어를 필요한 위치로 이동하면 중앙 페이지에서 원하는 대로 레이어를 사용할 수 있습니다.
결론: 페이지 중앙에 배치하고, 팝업 메뉴를 만들고, 삽입/레이어 명령을 사용하고, 레이어 레이아웃을 사용하고, 콘텐츠를 레이어에 배치하고, 중첩된 레이어를 사용하세요.