CSS Макет - Властивість position
Властивість position визначає тип метода позиціонування, що використовується для елемента (статичний, відносний, фіксований, абсолютний або закріплений - static, relative, fixed, absolute або sticky).
Властивість position
Властивість position визначає тип метода позиціонування, що використовується для елемента.
Є п’ять різних значень position (позиції):
static- статичнийrelative- відноснийfixed- фіксованийabsolute- абсолютнийsticky- закріплений
Потім елементи позиціонуються з використанням властивостей top, bottom, left та right (вгорі, знизу, зліва, справа). Однак ці властивості не будуть працювати, якщо спочатку не встановлено властивість position. Вони також працюють по-різному в залежності від значення position.
position: static;
HTML-елементи за замовчуванням розташовані статично.
На статичні елементи не впливають властивості top, bottom, left та right.
Елемент із position: static; не позиціонується яким-небудь особливим чином; він завжди позиціонується відповідно до звичайного потоку сторінки:
Ось CSS, що використовується:
position: relative;
Елемент із position: relative; позиціонується відносно свого нормального положення.
Встановлення властивостей top, right, bottom та left відносно позиціонованого елемента призведе до відхилення від його нормального положення. Інший зміст не буде відкоректовано, щоб вписатися в будь-який пробіл, залишений елементом.
Ось CSS, що використовується:
position: fixed;
Елемент із position: fixed; позиціонується відносно області перегляду, що означає, що він завжди залишається на тому самому місці, навіть якщо сторінка прокручується. Властивості top, right, bottom та left використовуються для позиціонування елемента.
Фіксований (fixed) елемент не залишає пробілу на сторінці, де він, зазвичай, знаходився б.
Зверніть увагу на фіксований елемент в правому нижньому куті даної сторінки. Ось CSS, що використовується:
Приклад
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Спробуйте самі »
position: fixed;
position: absolute;
Елемент із position: absolute; позиціонується відносно найближчого позиціонованого предка (замість позиціонування відносно вікна перегляду, як фіксований).
Однак, якщо елемент з абсолютним позиціонуванням не має позиціонованих предків, він використовує тіло документа і переміщується разом з прокруткою сторінки.
Примітка: "Позиціонований" елемент - це той, чия позиція що завгодно, крім static.
Ось простий приклад:
Ось CSS, що використовується:
Приклад
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Спробуйте самі »
position: sticky;
Елемент із position: sticky; (прикріплений) позиціонується на основі позиції прокрутки користувача.
Елемент sticky переключається між relative та fixed, в залежності від положення прокрутки. Він позиціонується відносно до тих пір, поки у вікні перегляду не буде досягнута задана позиція зміщення, а потім він "закріпиться" на місці (наприклад, position:fixed).
Примітка: Internet Explorer, Edge 15 і більш ранні версії не підтримують position: sticky. Safari вимагає -webkit-prefix (див. приклад нижче). Ви також маєте вказати хоча б одне зі значень: top, right, bottom або left для роботи sticky позиціонування.
В цьому прикладі sticky елемент дотримується верхньої частини сторінки (top: 0), коли ви досягнете своєї позиції прокрутки.
Приклад
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Спробуйте самі »
Елементи, що перекриваються
Коли елементи позиціонуються на сторінці, вони можуть перекривати інші елементи.
Властивість z-index визначає порядок стека елемента (який елемент має бути розташований попереду або позаду інших, тобто, який елемент перекриває інший).
Елемент може мати позитивний або негативний порядок в стеку:
Це заголовок
Оскільки зображення має z-index -1, воно буде розташовано за текстом, тобто текст буде знаходитись зверху зображення.
Елемент з більш високим порядком стека знаходиться попереду елементу з більш низьким порядком стека.
Примітка: Якщо два позиціонованих елемента перекриваються без вказування z-index, елемент, розташований останнім в HTML коді, буде відображений зверху.
Позиціонування тексту в зображенні
Як розмістити текст поверх зображення:
Приклад
Спробуйте самі:
Зверху зліва » Зверху справа » Знизу зліва » Знизу справа » По центру »Більше прикладів
Встановіть форму елемента
Цей приклад демонструє, як встановити форму елемента. Елемент обрізається до цієї форми та відображається.
Перевірте себе за допомогою вправ!
Всі CSS властивості позиціонування
| Властивість | Опис |
|---|---|
| bottom | Визначає нижній край поля для позиціонованого блоку |
| clip | Закріплює абсолютно позиціонований елемент |
| left | Визначає край лівого поля для позиціонованого блоку |
| position | Визначає тип позиціонування для елемента |
| right | Визначає правий край поля для позиціонованого блоку |
| top | Визначає верхній край поля для позиціонованого блоку |
| z-index | Визначає порядок стека елемента |
