Самая большая проблема при использовании слоев на центрированной странице — это расположение слоя. При изменении разрешения экрана положение слоя относительно других центрированных элементов изменится. В этой статье представлены способы предотвращения смещения слоев относительно других центрированных элементов.
Абсолютное и относительное позиционирование
слоев. Код абсолютного позиционирования слоев:
<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>
На центральной странице вставьте код слоя относительного позиционирования, и положение слоя будет в центре страницы. Но он стал неподвижным и неудобным в использовании.
Вставьте код абсолютного позиционирования. Если слева и сверху содержатся положительные и отрицательные значения, слой не может быть центрирован. Когда атрибуты left и top очищены, слой можно центрировать и не возникает смещений относительно других центрированных элементов на странице.
Разница между слоями рисования и слоями вставки
. Использование слоев рисования:
На центральной странице используйте код, который визуализирует слой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
</голова>
<тело>
<div id="Layer1" style="position:absolute; слева:40px; сверху:30px; ширина:265px; высота:75px; z-index:1"></div>
<div align="center"></div>
</тело>
</html>
Используйте слой вставки:
На центральной странице используйте код слоя вставки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div2</title>
</голова>
<тело>
<div align="center">
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"></div>
</div>
</тело>
</html>
Поскольку код, созданный с использованием «слоя рисования», не включен в код центрирования, чтобы гарантировать, что слой не будет смещен относительно других элементов на центрированной странице, необходимо использовать слой вставки.
На центрированных страницах обычно используются два метода, чтобы гарантировать отсутствие смещения слоев относительно других центрированных элементов.
Использование слоя вставки
1. На центрированной странице поместите точку вставки в документ. В примере поместите точку вставки в таблицу.
2. Выберите меню «Вставка»/«Слой».
3.В документ будет вставлен слой. В примере в таблицу вставлен слой. При тестировании в браузере IE и изменении разрешения содержимое слоя не будет смещено относительно других центрированных элементов.
Проверьте свойства этого слоя на панели свойств. Этот вставленный слой очищает значения «левое» и «верхнее».
Этот метод часто используется для создания всплывающих меню.
Использование вложенных слоев
Вложенный уровень — это уровень, код которого содержится внутри другого слоя.
Прежде чем использовать вложенные слои, необходимо сначала установить некоторые параметры слоя. Выберите меню «Редактировать»/«Настройки» и в диалоговом окне «Настройки» выберите «Совместимость с Netscape 4: фиксированный размер при вставке слоев», чтобы созданные вложенные слои были совместимы с браузером Netscape 4. И установите флажок «Вложение: использовать вложение, если оно находится в слое».
Откройте панель «Слои» и снимите флажок «Предотвратить перекрытие».
Вложенный слой:
вставьте таблицу на центрированную страницу и вставьте слой в таблицу. Этот слой не будет смещен относительно таблицы. В этом слое используйте команду «Вставить»/«Слой», чтобы вставить подслой (вложенный слой). Независимо от того, как вы перемещаете этот подслой по странице, его положение не будет смещено относительно других центрированных элементов.
Во вставленный слой вы можете вставить несколько вложенных слоев, а затем переместить вложенные слои в нужные места, чтобы можно было использовать слои по своему усмотрению на центральной странице.
Вывод: центрируйте страницу, создавайте всплывающие меню, используйте команду «Вставка/Слой»; используйте макет слоя и размещайте контент в слоях, используйте вложенные слои.