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

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

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

 

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

 

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

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