style.position в JavaScript — позиціонування елемента

Загальний опис

Властивість 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 є ключовим інструментом для веб-розробників, що дозволяє точно контролювати розташування елементів на сторінці та створювати динамічні й інтерактивні інтерфейси користувача.

правити

Порада

Використання position: fixed для створення завжди видимих елементів, таких як навігаційні панелі або кнопки повернення до верхньої частини сторінки, є ще однією корисною порадою. Елемент із position: fixed не змінює свого положення при прокручуванні сторінки, що робить його ідеальним для таких випадків. Наприклад, header.style.position = 'fixed'; header.style.top = '0'; закріпить заголовок у верхній частині вікна.

автор: Bond правити

Порада

Варто пам’ятати про використання значення sticky, яке дозволяє елементам залишатися на місці до досягнення певної точки прокручування, після чого вони залишаються фіксованими. Це зручно для створення "липких" заголовків або бокових панелей, які прокручуються разом із контентом до певної точки. Наприклад, header.style.position = 'sticky'; header.style.top = '0'; створить заголовок, який залишатиметься видимим при прокручуванні.

автор: Bond правити

Порада

Важливо враховувати контекст використання властивості position у поєднанні з іншими CSS-властивостями, такими як z-index. Використання z-index дозволяє контролювати порядок накладання елементів з різними значеннями position. Наприклад, element.style.position = 'absolute'; element.style.zIndex = '10'; забезпечить, що елемент завжди буде на передньому плані, якщо інші елементи мають нижчий z-index.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.position

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<button id="menuButton">Натисни</button>
<select id="dropdownMenu">
    <option value="1">перший</option>
    <option value="2">другий</option>
</select>

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';
    }
});

<header>
  <h2 class="title">element.style.position</h2>
  <p class="description">Встановлює або повертає тип позиціонування елемента на веб-сторінці.</p>
</header>
<main>
  <div class="result">
    <div id="movableBox" class="box"></div>
    <div class="controls">
      <button id="upButton">Вгору</button>
      <button id="downButton">Вниз</button>
      <button id="leftButton">Вліво</button>
      <button id="rightButton">Вправо</button>
    </div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  position: relative;
  height: 400px;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all .15s ease-out 0s;
}

.controls {
  margin-top: 20px;
}

.controls button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
}

const movableBox = document.getElementById('movableBox');
const upButton = document.getElementById('upButton');
const downButton = document.getElementById('downButton');
const leftButton = document.getElementById('leftButton');
const rightButton = document.getElementById('rightButton');

// Ініціалізуємо позиції
let topPosition = movableBox.offsetTop;
let leftPosition = movableBox.offsetLeft;

upButton.addEventListener('click', function () {
  topPosition -= 10;
  movableBox.style.top = `${topPosition}px`;
});

downButton.addEventListener('click', function () {
  topPosition += 10;
  movableBox.style.top = `${topPosition}px`;
});

leftButton.addEventListener('click', function () {
  leftPosition -= 10;
  movableBox.style.left = `${leftPosition}px`;
});

rightButton.addEventListener('click', function () {
  leftPosition += 10;
  movableBox.style.left = `${leftPosition}px`;
});
//# sourceURL=pen.js

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' });
});