Лекція 11.Позиціонування у CSS

• Координати і розміри
• Абсолютні координати
• Відносні координати
• Лінійні розміри блоку
• Управління видимістю
• Порядок накладення і область видимості
• Порядок накладення блоків. z-index
• Область видимості блоку. clip

Розміщення блокових елементів HTML-розмітки в робочій області браузера з точністю до пікселя: розміри блоку, абсолютні та відносні координати. Шари: управління видимістю.

Цей розділ присвячений розміщення блокових елементів HTML-розмітки в робочій області браузера з точністю до пікселя. До появи специфікації CSS-P, яка увійшла в специфікацію CSS2, нічого подібного робити на HTML-сторінках було не можна.

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

До появи CSS-P єдиним засобом щодо точного позиціонування були таблиці. Вони дозволяли точно розташувати компоненти HTML-сторінки відносно один одного на площині. CSS-P дозволяє точно розмістити елемент розмітки не тільки щодо інших компонентів сторінки, але й щодо меж сторінки.

Крім того, CSS-P додає сторінці ще один вимір - елементи розмітки можуть "наїжджати" один на одного.

При цьому можна змінювати порядок "наїзду "- перекладати шари. Щоб у цьому переконатися, достатньо скористатися посиланням із наведеного прикладу.

Але і це ще не все.

Шари можна проявляти.

Рис. 12.1. Позиціонування

Рис. 12.2. Позиціонування

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

Тепер переходимо до обговорення атрибутів позиціонування.

Рис. 12.3. Позиціонування

Рис. 12.4. Позиціонування

Дата добавления: 2014-01-15