Фіксований дизайн. Позиціонування

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

Крім використання властивості float для розміщення поруч по горизонталі двох або більше шарів, для цієї ж мети застосовується властивість position. Важко оцінити, який підхід із використанням цих властивостей краще, якщо вони в результаті дають однаковий результат. Проте у позиціонування є більший потенціал, що дозволяє не лише розміщувати шари поруч, а й накладати їх один на одного. За допомогою таких "перекриттів" можна створити виразний дизайн веб-сторінок простими засобами.

Координати шару

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

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

В разі використання відносного позиціонування, координати обчислюються від початкового положення шару (рис. 2). Тут пунктиром виділено початкове положення шару, а сплощеною лінією результат його переміщення.

Позитивні значення властивості left зсувають шар вправо, від'ємні - вліво. З властивістю right справа справа, позитивні значення цієї властивості зсувають шар вліво, а від'ємні - вправо. Аналогічна ситуація і з парою top/bottom. Значення зі знаком мінус у властивості top піднімають шар вгору, а позитивні значення опускають шар вниз. Значення властивості bottom працює з точністю навпаки.

Зверніть увагу, що вказання властивості position без згадки координат (значень left, top, right або bottom) не змінює положення поточного шару, але впливає на розташування близьких або вкладених шарів.

Розміщення двох шарів

При розміщенні двох шарів поруч по горизонталі, лівому шару необхідно задати абсолютне положення, а правому - відносне (приклад 1). Це найбільш універсальний підхід, який гарантує, що шари будуть позиціоновані правильно відносно один одного та вікна браузера. При цьому не має значення, як буде розташовуватися макет - по лівому краю чи по центру вікна - шари не змінять свого положення. Обов'язково слід зсунути правий шар (у прикладі він називається rightcol) по горизонталі за допомогою властивості left на величину, що дорівнює ширині лівого шару. В іншому випадку шари будуть накладатися один на одного.

Приклад 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"> 
   #leftcol {
    position: absolute; /* Абсолютне позиціонування */
    width: 200px; /* Ширина шару */
    background: #800000; /* Колір фону */
    color: white;  /* Колір тексту */ 
   }
   #rightcol {
    position: relative; /* Відносне позиціонування */
    left: 200px; /* Зсуваємо шар вправо на ширину лівого шару */
    width: 550px; /* Ширина шару */
    background: #e0e0e0; /* Колір фону */
    padding: 10px; /* Поля навколо тексту */
   }
  </style>
 </head>
 <body>
  <div id="leftcol">Ліва колонка</div>
  <div id="rightcol">Права колонка </div>
 </body>
</html>

Незважаючи на простоту рішення, у цьому випадку слід врахувати декілька моментів.

  • Використання position: absolute для лівої колонки, хоч і не дає видимого результату, необхідно для того, щоб права колонка не "перестрибувала" вниз, і шари розташовувались на одному рівні.
  • Положення правого шару rightcol залежить від значення стильової властивості left, воно в цьому випадку повинно дорівнювати ширині лівого шару, у цьому випадку шари будуть тісно притулятися один до одного. Однак нічого не заважає змінювати цей параметр у ту або іншу сторону. Тоді між шарами з'явиться роздільна смуга або навпаки, шари почнуть накладатися один на одного.
  • Властивість padding, що додає поля навколо тексту, якщо її використовувати в стилі лівого шару leftcol, вносить спотворення в макет сторінки для браузера. Це пов'язано з тим, що ширина елемента в браузері складається зі значень width, padding і margin. Оскільки додавання полів збільшує ширину шару, то права колонка починає накладатися поверх лівої колонки. Щоб усунути цю особливість, атрибут padding слід застосувати до стилю абзацу, який повинен розташовуватися всередині шару, або змінити значення width. Також можна додати ще один внутрішній шар і вказати поля для нього (приклад 2).

Приклад 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: 200px; background: #800000; color: white; 
   }
   #leftcol div {
    padding: 10px; /* Поля навколо тексту в лівій колонці */
   }
   #rightcol {
    position: relative; left: 200px; width: 550px; background: #e0e0e0;
   }
   #rightcol div {
    padding: 10px; /* Поля навколо тексту в правій колонці */
   }
  </style>
 </head>
 <body>
  <div id="leftcol">
    <div>Ліва колонка</div>
  </div>
  <div id="rightcol">
    <div>Права колонка</div>
  </div>
 </body>
</html>

Висновок

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

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

веб-дизайнпозиціонування

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