JS властивість CSSStyleDeclaration.position
Загальний опис
Властивість element.style.position визначає метод позиціонування елемента у веб-документі. Вона може приймати значення static, relative, absolute, fixed або sticky. Від обраного значення залежить, як саме елемент буде розташований у контейнері, чи буде він прокручуватися разом зі сторінкою, та як він взаємодіятиме з іншими елементами на сторінці.
Значення властивості
static(за замовчуванням): Елемент розташовується відповідно до нормального потоку документа. Властивостіtop,right,bottom,leftне застосовуються.relative: Елемент розташовується відповідно до нормального потоку, але можна змістити його відносно початкового положення за допомогою властивостейtop,right,bottom,left.absolute: Елемент позиціонується відносно найближчого предка, який має позиціонування (окрімstatic). Якщо такого предка немає, елемент позиціонується відносно сторінки.fixed: Елемент позиціонується відносно вікна браузера і не змінює своє положення при прокручуванні сторінки.sticky: Елемент веде себе якrelative, поки не досягне певної точки прокручування, після чого веде себе якfixed.
Приклад використання
// Отримання значення властивості position
const element = document.getElementById('myElement');
console.log(element.style.position); // Виведе значення властивості
// Встановлення значення властивості position
element.style.position = 'absolute';
element.style.top = '50px';
element.style.left = '100px';
У цьому прикладі ми спочатку отримуємо доступ до елемента з ідентифікатором myElement, виводимо його поточне значення position (якщо воно задане), а потім встановлюємо його в absolute та зміщуємо на 50 пікселів вниз та на 100 пікселів вправо.
Застосування в реальних сценаріях
Властивість position часто використовується для створення складних макетів, наприклад, для реалізації випадаючих меню, модальних вікон або фіксованих заголовків, які залишаються на вершині сторінки під час прокручування.
// Створення фіксованого заголовка
const header = document.getElementById('header');
header.style.position = 'fixed';
header.style.top = '0';
header.style.width = '100%';
У цьому прикладі заголовок header буде завжди залишатися у верхній частині вікна браузера, незалежно від прокручування сторінки.
Властивість element.style.position є ключовим інструментом для веб-розробників, що дозволяє точно контролювати розташування елементів на сторінці та створювати динамічні й інтерактивні інтерфейси користувача.
| Порада: | Використання |
| Порада: | Варто пам’ятати про використання значення |
| Порада: | Важливо враховувати контекст використання властивості |
Синтаксис
element.style.positionЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може переміщати червоний блок по сторінці за допомогою кнопок. Блок спочатку позиціонується в центрі контейнера за допомогою position: absolute і значень top та left. Кожне натискання кнопки змінює відповідну координату блоку, дозволяючи йому рухатися по сторінці. Це наочно демонструє, як можна динамічно змінювати положення елемента за допомогою властивості element.style.position.
У цьому прикладі ми створюємо випадаюче меню, яке з'являється при натисканні на кнопку. Властивість position: absolute дозволяє меню з'явитися прямо під кнопкою, незалежно від поточного розташування кнопки на сторінці. Це корисно для реалізації динамічних інтерфейсів користувача, де елементи повинні з'являтися в певних позиціях відносно інших елементів.
const menuButton = document.getElementById('menuButton');
const dropdownMenu = document.getElementById('dropdownMenu');
menuButton.addEventListener('click', function() {
if (dropdownMenu.style.display === 'none' || dropdownMenu.style.display === '') {
dropdownMenu.style.display = 'block';
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.top = `${menuButton.offsetTop + menuButton.offsetHeight}px`;
dropdownMenu.style.left = `${menuButton.offsetLeft}px`;
} else {
dropdownMenu.style.display = 'none';
}
});
Цей приклад демонструє створення плаваючої кнопки, яка з'являється при прокручуванні сторінки вниз і дозволяє користувачеві швидко повернутися до верхньої частини сторінки. Властивість position: fixed забезпечує, що кнопка залишається в одному і тому ж місці в нижньому правому куті вікна браузера, незалежно від прокручування сторінки. Це зручно для покращення навігації на довгих веб-сторінках.
const scrollButton = document.createElement('button');
scrollButton.innerText = 'Up';
document.body.appendChild(scrollButton);
scrollButton.style.position = 'fixed';
scrollButton.style.bottom = '20px';
scrollButton.style.right = '20px';
scrollButton.style.display = 'none';
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
scrollButton.style.display = 'block';
} else {
scrollButton.style.display = 'none';
}
});
scrollButton.addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});