фіксоване позиціювання
Фіксоване позиціювання елемента задається значенням fixed властивості position і за своєю дією схоже на абсолютне позиціонування. Але на відміну від нього прив'язується до зазначеної властивостями left, top, right і bottom точці на екрані і не змінює свого положення при прокручуванні веб-сторінки.
Для фіксованого позиціонування характерні наступні особливості.
- При прокручуванні веб-сторінки елемент залишається на своєму початковому місці.
- Положення елемента завжди відраховується від області перегляду браузера, незалежно від позиціонування батька.
- При виході елемента за межі видимої області праворуч або знизу від неї, не виникає смуг прокрутки і елемент просто «обрізається».
В іншому, значення fixed схоже на absolute.
Застосовується такий тип позиціонування для створення меню, вкладок, заголовків, в загальному, будь-яких елементів, які повинні бути закріплені на веб-сторінці і завжди видно відвідувачу. У прикладі 1 показано додавання «шапки», яка залишається на одному місці незалежно від обсягу інформації на сайті.
Приклад 1. Використання fixed
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Шапка </ title> <style> header {position: fixed; / * Фіксована позиціонування * / left: 0; right: 0; / * Вся ширина * / top: 0; / * Положення зверху * / padding: 10px; / * Поля навколо тексту * / background: # 3989c9; / * Колір фону * / color: #fff; / * Колір тексту * /} header h1 {margin: 0; / * Прибираємо відступи * /} main {min-height: 1000px; / * Мінімальна висота * / margin-top: 70px; / * Відступ зверху * / display: block; / * Для IE * /} </ style> </ head> <body> <header> <h1> Назва сайту </ h1> </ header> <main> <p> Множення вектора на число, виключаючи очевидний випадок, позиціонує інтеграл по поверхні. </ p> </ main> </ body> </ html>
Результат прикладу показаний на рис. 1. Оскільки фіксований елемент накладається на текст і приховує його, доданий відступ зверху для <main>. Тим самим текст зсувається вниз на висоту «шапки».
Мал. 1. Фіксована «шапка»
fixed подібно absolute також може використовуватися для виведення діалогових вікон і повідомлень, але при цьому фіксоване повідомлення неможливо прокрутити вгору або вниз, воно завжди залишається на своєму місці. У прикладі 2 для виведення блоку в центрі веб-сторінки ми позиціонуємо його за допомогою властивостей left і top зі значенням 50%. При цьому рівно по центру виявиться лівий верхній кут, тому весь блок зміщуємо вліво і вгору на половину його ширини і висоти за допомогою властивості transform . Розміри блоку обчислюються автоматично і дорівнюють розміру вмісту плюс значення padding.
Приклад 2. Фіксований блок
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Повідомлення </ title> <style> .msg {position: fixed; / * Фіксована позиціонування * / padding: 10px; / * Поля навколо тексту * / background: # 009d4b; / * Колір фону * / color: #fff; / * Колір тексту * / left: 50%; top: 50%; / * Виводимо в центрі * / transform: translate (-50%, -50%); / * Зміщуємо вліво і вгору * /} body {min-height: 1000px; / * Мінімальна висота * /} </ style> </ head> <body> <div class = "msg"> Все в порядку, сайт знаходиться на відстані! </ Div> </ body> </ html>
Результат даного прикладу показаний на рис. 2.
Мал. 2. Повідомлення в центрі веб-сторінки
Перейти до завдань