абсолютне позиціонування
При абсолютному позиціонуванні елемент не існує в потоці документа і його положення задається щодо країв браузера. Встановити цей тип можна через значення absolute властивості position. Координати вказуються щодо країв вікна браузера, званого «видимою областю» або «областю перегляду» (рис. 1).
Мал. 1. Значення властивостей left, right, top і bottom при абсолютному позиціонуванні
Для елемента з абсолютним позиціонуванням характерні наступні особливості.
- Ширина елемента, коли її не вказано явно, визначається шириною вмісту плюс значення padding, border і margin.
- Елемент не змінює своє початкове положення, якщо у нього немає властивостей right, left, top і bottom.
- Одночасно зазначені властивості left і right формують ширину елемента, але тільки якщо width не вказано. Варто додати властивість width і значення right буде проігноровано. Аналогічно відбудеться і з висотою елемента, але вже беруть участь властивості top, bottom і height.
- Властивості left і top мають більш високий пріоритет у порівнянні з right і bottom. Якщо left і right суперечать один одному, то значення right ігнорується. Те ж саме стосується і bottom.
- Якщо left визначення від'ємного значення, то елемент піде за лівий край браузера, смуги прокрутки при цьому не виникне. Те саме можна сказати і до властивості top, тільки елемент піде за верхній край.
- Якщо left задати значення більше ширини видимої області або вказати right з від'ємним значенням, то з'явиться горизонтальна смуга прокрутки. Подібне правило працює і з top, тільки мова піде про вертикальній смузі прокрутки.
- Елемент переміститься з документом при його прокручуванні.
- працює властивість z-index , При цьому абсолютно позиційований елементи перекривають статичні елементи, навіть якщо вони в коді нижче.
Властивість position зі значенням absolute можна використовувати для створення ефекту фреймів. Крім абсолютного позиціонування для елементів слід призначити властивість overflow зі значенням auto. Тоді, якщо вміст перевищить висоту видимої області, з'явиться смуга прокрутки. Висота і ширина «фреймів» формується автоматично шляхом одночасного використання властивостей left, right для ширини і top, bottom для висоти (приклад 1).
Приклад 1. Імітація фреймів
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Фрейми </ title> <style> body {margin: 0; / * Прибираємо відступи * /} .sidebar, .content {position: absolute; / * Абсолютне позиціонування * / overflow: auto; / * Смуги прокручування при необхідності * / padding: 10px; / * Поля навколо тексту * / top: 61px; / * Відстань від верхнього краю * / bottom: 0; / * Відстань від нижнього краю * /} header {height: 60px; / * Висота * / background: # FEDFC0; / * Колір фону * / border-bottom: 1px solid # 7B5427; / * Лінійка знизу * /} header h1 {line-height: 60px; / * Вирівнюємо по середині * / margin: 0 10px; / * Зрушуємо заголовок * /} .sidebar {width: 150px; / * Ширина * / background: # ECF5E4; / * Колір фону * / border-right: 1px solid # 231F20; / * Лінія справа * /} .content {left: 171px; / * Відстань від лівого краю * / right: 0; / * Відстань справа * /} </ style> </ head> <body> <header> <h1> Плов народів світу </ h1> </ header> <section class = "sidebar"> <p> Плов по-ферганськи </ p> <p> Плов узбецький </ p> <p> Плов сибірський </ p> <p> Плов італійський </ p> <p> Плов естонський </ p> <p> Плов по-американськи </ p > <p> Плов по-индейски </ p> </ section> <section class = "content"> <h2> Плов по-ферганськи </ h2> <p> Покласти в казан нарізане шматочками м'ясо і підсмажити його до утворення скоринки . Нашатковану кільцями цибулю смажити разом з м'ясом до червонуватого кольору, потім додати моркву, нарізану соломкою. Покласти половину солі, все перемішати і смажити, поки морква не придбає золотаво-коричневий колір. Після цього налити половину необхідної кількості води і дати закипіти. </ P> <p> Засипати рівним шаром рис, посилити вогонь і негайно налити воду, щоб вона накрила рис на 1-1,5 см. Як тільки вода випарується, плов за допомогою шумівки зібрати до середини гіркою, проколоти паличкою в кількох місцях так, щоб вода, що знаходиться на поверхні, пройшла на дно. Потім накрити плов і дати йому упреться 20-25 хв. </ P> <p> Ретельно перемішайте готовий плов, перекладіть у велике блюдо, зверху розкладіть м'ясо. </ P> </ section> </ body> </ html>
Результат даного прикладу показаний на рис. 2. Елемент <header> виводиться в потоці як зазвичай, а для sidebar і content встановлено абсолютне позиціонування.
Мал. 2. Імітація фреймів на веб-сторінці
Той же самий прийом, коли ми задаємо розміри елемента за допомогою властивостей left, right, top і bottom, застосовується для створення різних ефектів. Наприклад, можна зробити затемнення веб-сторінки для виведення повідомлення і залучення до нього уваги. У прикладі 2 додається елемент з класом overlay, розміри якого займають всю область перегляду. Робимо його напівпрозорого чорного кольору, а поверх відображаємо блок з класом dialog, який виводиться з центру горизонталі.
Приклад 2. Затемнення веб-сторінки
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Діалог </ title> <style> .overlay {position: absolute; / * Абсолютне позиціонування * / left: 0; right: 0; top: 0; bottom: 0; / * Займає весь простір * / background: rgba (0, 0, 0, 0.8); / * Напівпрозорий колір фону * /} .dialog {position: absolute; / * Абсолютне позиціонування * / background: #fff; / * Колір фону * / width: 260px; / * Ширина * / padding: 20px; / * Поля * / min-height: 180px; / * Мінімальна висота * / left: 0; right: 0; / * Потрібно для вирівнювання * / margin: 80px auto 0; / * Вирівнюємо по центру * /} </ style> </ head> <body> <div class = "overlay"> </ div> <div class = "dialog"> <h2> Повідомлення </ h2> </ div > <p> Багатство світової літератури від Платона до Ортеги-і-Гассета свідчить про те, що культурна аура твори викликає певний метод кластерного аналізу, щось подібне можна зустріти в роботах Ауербаха і Тандлера. </ p> </ body> < / html>
Результат даного прикладу показаний на рис. 3.
Мал. 3. Діалогове вікно з затемненням
Зверніть увагу, що для виведення абсолютно позиціонованого елемента по центру горизонталі застосовується наступний стиль.
.dialog {width: 260px; left: 0; right: 0; margin-left: auto; margin-right: auto; }
Таким чином, поєднання width, left, right і margin управляє вирівнюванням елементів.
Абсолютне позиціонування дозволяє також приховувати елементи. Для цього часто додається стиль left: -9999px, який переносить елемент далеко вліво за область перегляду. Зокрема, цей прийом використовується для стилізації перемикачів і прапорців, коли ми приховуємо справжній прапорець, а замість нього стилізуємо елемент <label>, пов'язаний з <input> і виконує його функції (приклад 3).
Приклад 3. Стилізація прапорця
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Прапорець </ title> <style> .checkbox {width: 28px; / * Ширина перемикача * / height: 28px; / * Висота перемикача * / background: # 333; / * Колір рамки * /} .checkbox input [type = checkbox] {position: absolute; / * Абсолютне позиціонування * / left: -9999px; / * Приховуємо елемент * /} .checkbox input [type = checkbox]: checked + label {background: # 009d4b; / * Колір фону включеного перемикача * /} .checkbox label {display: block; / * Блочний елемент * / width: 20px; / * Ширина * / height: 20px; / * Висота * / position: relative; / * Відносне позиціонування * / left: 4px; top: 4px; / * Зміщуємо вправо і вниз * / background: #fff; / * Колір фону вимкненого перемикача * /} </ style> </ head> <body> <div class = "checkbox"> <input type = "checkbox" id = "c1" checked> <label for = "c1"> </ label> </ div> </ body> </ html>
Перейти до завдань