Позиціонування шару

Малобюджетні сайти.

Просування веб-сайту.

Позиціонування шару

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

Абсолютне та відносне положення шару

Положення координат залежить від якості position , якому зазвичай надають значення absolute (абсолютне) або relative (відносне).

При абсолютному позиціонуванні шар розміщується щодо верхнього лівого кута вікна документа за допомогою параметрів left і top (рис. 1). У разі розміщення шару всередині іншого абсолютні координати вважаються від лівого верхнього кута батьківського шару (рис. 2).

значення

Мал. 1. Положення шару щодо вікна браузера

Крім тегів DIV та SPAN абсолютне позиціонування підтримують такі елементи: APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

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

значення

Мал. 2. Положення шару щодо батьківського елемента

Використання відносного позиціонування наведено у прикладі 1.

Приклад 1. Відносне положення шару

Популярні системи ТЕХ та LATEX мають свою оригінальну форму написання, підкреслюючи тим самим можливості, які в них закладені. А що нам їхні можливості, у шарів і стилів теж можливості ого-го якісь, так що навіть такий хитрий напис легко виходить за допомогою простого коду.

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

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

Приклад 2. Абсолютне положення шару

Зміна координат шару

Для зміни положення шару на сторінці за допомогою скриптів використовується метод top і left, які відповідно визначають позицію по вертикалі та горизонталі. Початок координат, нагадую, ведеться від верхнього лівого кута шару.

Різні браузери підходять по-різному до зміни координат об'єктів. Так, для шару з ім'ям knob, положення по вертикалі визначатиметься таким способом:

  • браузери, що підтримують DOM (Document Object Model), використовують метод document.getElementById("knob").style.top ;
  • Internet Explorer - document.all["knob"].style.top;
  • Netscape 4 працює з тегом LAYER - document.layers["knob"].top .

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