Добрый день.

Сегодня речь пойдет о верстке с использованием слоев в продолжении темы о фиксированном дизайне — как правильно накладывать один слой на другой.
Материал печатается в сокращенном виде, адрес статьи на сайте — www.htmlbook.ru/content/?id=184.

Фиксированный дизайн. Наложение слоев

Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.

Существует несколько способов создания наложения. Самый простой из них, но при этом и менее гибкий — использование абсолютного позиционирования.

Абсолютное позиционирование

Абсолютное позиционирование позволяет накладывать слои в любом порядке друг на друга. Но при этом требуется знать точные координаты каждого слоя относительно левого верхнего угла окна браузера, что не всегда возможно. Поэтому данный подход имеет ограниченную область применения, например, для создания верхнего меню, когда его положение не меняется и точно зафиксировано.

При использовании наложения требуется присвоить свойству position значение absolute. Само положение слоя регулируется параметрами left и top, которые задают координаты левого верхнего угла слоя (пример 1). Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, указанный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок, также, можно менять, используя атрибут z-index. Чем больше его значение, тем выше располагается слой относительно других.

Значения left и top следует указывать обязательно для всех слоев, чтобы получилось нужное наложение с заданными координатами.

Более интересный подход к созданию наложения — использование относительного позиционирования. В этом случае слои можно размещать по центру окна браузера или располагать их в любом месте веб-страницы, не задумываясь уже над значением координат слоев.

Относительное позиционирование

Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая параметру position значение absolute. Второй слой, расположенный наверху первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у параметра position. Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием атрибутов left и top (рис. 1).

Рис 1. Задание положения верхнего слоя

В примере 2 ширина слоев задается параметром width, а местоположение верхнего слоя свойствами left и top. Как указывалось выше, порядок наложения слоев определяется их порядком описания в коде или с помощью параметра z-index. Поэтому слой с именем content будет располагаться на заднем плане, поскольку он определен самым первым.

Увы, но данный подход не будет работать, как требуется, в браузере Opera. Даже при установке атрибута z-index, слой с относительным позиционированием будет располагаться всегда на заднем плане. В браузерах Internet Explorer, Netscape и Mozilla код будет работать корректно. Если веб-страница ориентирована для просмотра именно в этих браузерах, то код, указанный в примере 2, вполне подойдет для создания наложения слоев.

Подход лишенный указанного недостатка, тем не менее, существует. Он связан с относительным позиционированием и использует все разнообразие средств размещения разных слоев.

background-color