У звичайному гіпертекстовому документі, всі елементи так чи інакше впливають один на одного при формуванні його зовнішнього вигляду. Т. е. Абзац тексту «зрушує» наступних на деяку відстань вниз, картинка вирівняна вправо «змушує» текст обтікати її і т. П. Всі елементи разом утворюють так званий «HTML-потік» або «потік документа» (document flow).
Шари в свою чергу - це частини сторінки, які не входять до основної HTML-потік. Для кожного з них створюється свій, додатковий, потік, які ніяк не впливають на основного. При цьому вони показуються як правило над (зверху) основного змісту і розташовуються в строго певне місце зазначених вище в пікселях від лівого верхнього кута сторінки.
За допомогою шарів можна робити всякі спливаючі / випадають меню, напівпрозорі відображення перетягувати елементи та інші т. Н. «Eye-candies».
Перед виходом NN4 (і подальшим виходом MSIE4) з'являється робоча версія (working draft) специфікації під назвою «Positioning HTML Elements with Cascading Style Sheets» (відома як CSS-P). Ця специфікація так і не стала рекомендацією, тому що увійшла до складу CSS level 1, але все ще може бути знайдена на сайті W3C.
Що говориться в цьому документі? У ньому описані два способи (три, якщо вважати поведінку за замовчуванням - статичне положення) позиціонування елементів на сторінці: щодо і абсолютно.
У першому випадку, коли елемент розташований щодо інших елементів в HTML-потоці, він займає своє звичайне місце на сторінці і взаємодіє з іншими елементами так, як ніби він самий звичайний елемент. Особливість полягає в тому, що він може бути зображений «зі зміщенням» по відношенню до інших елементів сторінки, т. Е. Щодо. Незважаючи на те, що є безліч прикладів використання щодо позиціонуються елементів, як правило їх не використовують за прямим призначенням. Особисто мені вони потрібні тільки для визначення положення конкретного елементу сторінки в NN4.
Другий випадок - абсолютно позиційований елементи і є шари.
Дуже просто. Просторікувати про те, що в MSIE потрібно використовувати
Отже, щоб зробити шар, який відступає на 100px від лівого верхнього кута сторінки потрібно написати наступний код:
Цей код буде працювати у всіх браузерах вище 4-й версії, навіть в Опері і в NN6 / Mozilla.
Є можливість зробити шар навіть після завершення завантаження документа. Звичайно, це вже не так безболісно, як в HTML'е. Не так сумісно. І. не так просто.
де n - ширина шару в пікселах.
На відміну від NN4, для MSIE4 шари - це такі-ж елементи, як і всі інші (тобто це не спеціальні об'єкти). Але через слабку об'єктної моделі новий шар потрібно додавати в кінець сторінки як звичайний HTML-код, за допомогою спеціальної функції insertAdjacentHTML (). А для того, щоб вказати, що це не звичайний статичний елемент, потрібно вказати абсолютне позиціонування:
При цьому, якщо в стилі не зазначена ширина шару (style = "width: 150;"), то вона не визначається в залежності від вмісту, за замовчуванням вона 100% від ширини вікна.
Це браузери MSIE5 + і NN6 / Mozilla. Наскільки мені відомо, не дивлячись на заяви підтримки DOM в Опері це працювати не буде.
Для браузерів підтримують методи DOM шари створюються як і в MSIE4 як звичайні HTML-елементи, тільки за допомогою методів DOM. При цьому завдання їх властивостей багато в чому схоже на те, як задаються властивості в NN4.
DOM-метод для створення елемента - це document.createElement (). З его допомогою можна створити будь-який елемент у відповідність з DTD, який використовується на сторінці. У нашому випадку це буде
Новий елемент створений і записаний в змінну newLeer. Тепер потрібно вказати його ім'я і положення. Ім'я вказується за допомогою стандартного методу setAttribute (). а положення - через об'єкт стилів, який є у будь-якого HTML-елемента:
Після цього нам потрібно створити вміст шару. Якщо це HTML-елементи, то потрібно скористатися того-ж методу document.createElement (). а якщо це просто текст, то потрібно створити textNode за допомогою методу document.createTextNode ():
В результаті у нас є дві змінні: newLeer і newLeerContents. Необхідно покласти вміст в шар і в свою чергу шар в документ. Для цього є ще один DOM-метод - appendChild ():
Але ми хіба шукаємо легких шляхів? ;-)
Приклад функції, яка створює шари для всіх браузер не буду приводити, якщо вона потрібна, я не сумніваюся, що зможете написати її самі.