Лекція 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. Позиціонування

Координати і розміри

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

CSS-P визначає дві системи координат: відносну та абсолютну. Це дозволяє забезпечити гнучкість розміщення елементів як щодо меж робочого поля вікна браузера, так і відносно один одного.

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

Абсолютні координати

При використанні "абсолютних" координат точка відліку поміщається у верхній лівий кут батьківського блоку (наприклад, вікна браузера), а осі X і Y спрямовані вправо по горизонталі і вниз по вертикалі, відповідно:

Рис. 12.5. Абсолютні координати

Якщо в цій системі координат деякий блоковий елемент повинен бути розміщений на 10 px нижче верхнього обріза робочої області браузера і на 20 px правіше лівого краю робочої області браузера, то його опис буде виглядати наступним

чином:.Example {position: absolute; top: 10px;

          left: 20px;}

У даній запису тип системи координат задано атрибутом position (значення - absolute), координата X задана атрибутом left (значення - 20 px), координата Y - атрибутом top (значення - 10 px).

Атрибути top і left визначають координати верхнього лівого кута блоку в абсолютній системі координат.

Рис. 12.6. Абсолютні координати

Значення координат можуть бути і негативними. Для того, щоб прибрати з видимої області блок з лінійними розмірами 100 px (висота) на 200 px (ширина), досить позиціонувати його таким

чином:.Example {position: absolute;

          top:-100px; left:-200px;

          width: 200px ; height: 100px;}

Рис. 12.7. Абсолютні координати

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