Фіксований дизайн. Накладання шарів.

Влад Мержевич

Основна особливість шарів та їх використання від інших методів верстки полягає у точному позиціонуванні та здатності накладатися один на одного. Завдяки цій особливості за допомогою шарів можна створювати різні ефекти на веб-сторінці.

Існує кілька способів створення накладання. Найпростіший, але менш гнучкий - використання абсолютного позиціонування.

Абсолютне позиціонування

Абсолютне позиціонування дозволяє накладати шари в будь-якому порядку один на одного. Однак для цього потрібно знати точні координати кожного шару відносно одного з кутів вікна браузера, що не завжди можливо. Тому цей підхід має обмежену область застосування, наприклад, для створення верхнього меню, коли його положення не змінюється і точно фіксоване.

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

Приклад 1. Абсолютне позиціонування

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Позиціонування</title>
   <style type="text/css"> 
    #rightcol {
     position: absolute; /* Абсолютне позиціонування */
     left: 350px; /* Положення лівого краю */
     top: 50px; /* Положення верхнього краю */
     width: 120px; /* Ширина шару */
     background: #e0e0e0; /* Колір фону */
     border: solid 1px #000; /* Параметри рамки */
    }
    #leftcol {
     position: absolute; /* Абсолютне позиціонування */
     left: 0; /* Положення лівого краю */
     top: 0; /* Положення верхнього краю */
     width: 400px; /* Ширина шару */
     background: #800000; /* Колір фону */
     color: white; /* Колір тексту */
    }
   </style>
  </head>
  <body>
   <div id="leftcol">Ліва колонка</div>
   <div id="rightcol">Права колонка</div>
 </body>
</html>

У цьому прикладі положення шару з ім'ям leftcol встановлюється в лівому верхньому куту вікна браузера, а шар rightcol зсунутий на 350 пікселів праворуч від лівого краю вікна і на 50 пікселів вниз. Зверніть увагу, що значення left і top слід вказувати обов'язково для всіх шарів, щоб отримати потрібне накладання з встановленими координатами.

Більш цікавий підхід до створення накладання - використання відносного позиціонування. У цьому випадку шари можна розміщувати по центру вікна браузера або розміщувати їх в будь-якому місці веб-сторінки, не замислюючись уже над значенням координат шарів.

Відносне позиціонування

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

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

У прикладі 2 ширина шарів задається властивістю width, а положення верхнього шару (він називається rightcol) властивостями left і top. Як вказувалося вище, порядок накладання шарів визначається їх порядком опису в коді або за допомогою z-index. Тому шар з іменем leftcol буде розташовуватися на задньому плані, оскільки він визначений найпершим.

Приклад 2. Відносне позиціонування

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Позиціонування</title>
  <style type="text/css"> 
   #leftcol {
    position: absolute; /* Абсолютне позиціонування */
    width: 550px; /* Ширина лівої колонки */
    background: #e0e0e0; /* Колір фону вмісту */
    padding: 10px /* Поля навколо тексту */
   }
   #rightcol { /* Цей шар накладається поверх */ 
    position: relative; /* Відносне позиціонування */
    left: 500px; /* Положення від лівого краю */
    top: 20px; /* Положення від верхнього краю */
    width: 200px; /* Ширина правої колонки */
    background: #800000; /* Колір фону */
    color: #fff; /* Колір тексту */
   }
  </style>
 </head>
 <body>
  <div id="leftcol">Ліва колонка</div>
  <div id="rightcol">Права колонка</div>
 </body>
</html>

Існує і інший спосіб накладання шарів, пов'язаний з відносним позиціонуванням і використовує всю різноманітність засобів розміщення різних шарів.

Універсальний підхід

Теоретично, можна розмістити шари по вертикалі один під одним і підняти нижній шар вгору за допомогою властивості top, задавши йому від'ємне значення або за допомогою bottom. На практиці досягнути подібного досить складно, адже визначити висоту шару простими засобами, а, відповідно, і величину, на яку слід зміщувати шар, не представляє можливості, оскільки вона залежить від розміру шрифту, вмісту шару та багатьох інших параметрів. Простіше відлік координат вести від верхнього кута одного з шарів. Для цього слід розмістити шари поруч по вертикалі, а потім вже зміщувати один шар відносно іншого.

Це реалізується наступним способом. У кожного шару необхідно вказати конструкцію float: left, яка дозволяє один шар приставити до іншого справа. Додавати float слід для кожного шару, інакше в деяких браузерах може з'явитися проміжок між шарами.

Тепер шари розміщуються поруч, і перед тим, як вказувати координати, встановлюємо відносне позиціонування значенням relative у властивості position. Положення верхнього шару керується значенням left і top. Але оскільки відлік координат у даному випадку ведеться від лівого верхнього кута другого шару, по горизонталі слід вказувати від'ємне значення (рис. 2). Проте можна використовувати також властивість bottom.

Рис. 2. Задання положення верхнього шару

У прикладі 3 верхній шар з іменем rightcol зміщується на 50 пікселів по горизонталі і вертикалі. Щоб він не закривав при накладанні вміст шару leftcol, справа від тексту робиться відступ через властивість padding-right.

Як видно з прикладу, для створення накладання шарів потрібно задати всього дві властивост

Часті запитання