CSS позиціонування (CSS position)
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
Що таке позиціонування CSS?
Різне CSS позиціонування дуже часто використовується при верстці сучасних макетів і відкриває для нас нові цікаві можливості розташування елементів у потоці.
Але треба бути обережними та вміти поводитися з цими можливостями грамотно. Розглянемо такі CSS властивості позиціонування як position, top, left, right, bottom та z-index. А також їх значення.
CSS властивість position + (left, right, top, bottom и z-index)
Встановлює спосіб розташування елемента щодо вікна браузера або інших об'єктів на веб-сторінці. Допоміжні властивості left, right, top та bottom управляють положенням елемента, а z-index управляє накладенням один на одного по осі Z
.block-1
.block-2
.block-3
Елементи відображаються як зазвичай. Використання властивостей left, top, right, bottom і z-index не призводить до будь-яких результатів.
CSS код:
.mainblock{
background-color: #eee; position: static;}
.block-1{
position: static;}
.block-2{
position: static;}
.block-3{
position: static;}
.block-1
.block-2
.block-3
Положення елемента встановлюється щодо його початкового положення в коді. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в ту чи іншу сторону від початкового розташування.
CSS код:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
Кожен елемент може розташовуватися як нижче, так і вище за інші об'єкти веб-сторінки, їхнім розміщенням по z-вісі й керує z-index. Ця властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative.
CSS код:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: relative; top: 30px; left: 20px;}
.block-3{
position: relative; z-index: 2;}
.block-1
.block-2
.block-3
Елемент нібито виривається з коду і зависає в повітрі. Він перестає впливати на інші елементи. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в той чи інший бік відносно батька, у якого задано параметр position: relative; Якщо такого немає, то елемент позиціонується відносно вікна браузера.
CSS код:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
Елемент нібито виривається з коду і зависає в повітрі. Він перестає впливати на інші елементи. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в той чи інший бік відносно батька, у якого задано параметр position: relative;
CSS код:
.mainblock{
background-color: #eee; position: relative;}
.block-1{
}
.block-2{
position: absolute; top: 30px; left: 20px;}
.block-3{
}
.block-1
.block-2
.block-3
Елемент нібито виривається з коду і зависає в повітрі. Фіксується, тобто не скролиться разом із вмістом. Він перестає впливати на інші елементи. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в той чи інший бік щодо вікна браузера.
CSS код:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: fixed; width: 100%; bottom: 0px; left: 0px;}
.block-3{
}
.block-1
.block-2
.block-3
Це гібридне поєднання значень static і fixed. Спочатку елемент поводиться як static, але після того, як скрол доходить до його межі, він стає fixed і прилипає до зазначеної позиції top або bottom.
* Дивись підтримку браузерами
** Для демонстрації роботи потрібно проскролити контент всередині блоку
CSS код:
.mainblock{
background-color: #eee;}
.block-1{
}
.block-2{
position: sticky; top: 0px;}
.block-3{
}
Повернутися назад
