Position в css, уроки, webreference

Властивість position - це універсальне і потужне властивість. Воно дозволяє встановити або змінити положення елемента і містить чотири можливих значення:

  • static (значення за замовчуванням)
  • relative
  • absolute
  • fixed

Часто використовується поряд з чотирма властивостями координат:

Це значення position за замовчуванням. статичні елементи просто слідують природному потоку. Будь-які значення left. right. top або bottom не впливають.

Коли position встановлено відносно. елемент може переміщатися щодо його поточної позиції.

Давайте перемістимо другий абзац:

Червоний абзац перемістився на 20px зліва направо і на 10px зверху вниз щодо його природного стану, де він покладався бути.

Зверніть увагу, що сині абзаци не зрушили взагалі. При використанні відносного позиціонування, червоний абзац може вільно переміщатися, не порушуючи макет. Єдине, що зсувається зі свого місця, так це сам елемент. Всі інші елементи не знають, що елемент перемістився.

Коли position встановлюється абсолютно. елемент може переміщатися щодо першого позиціонованого предка.

Позиціонованого? Що таке позиційований елемент?

Позиційований елемент - це той, у якого значення position встановлено як relative. absolute або fixed. Таким чином, якщо становище не задано статичним, то елемент розташовується.

Характеристикою позиціонованого елемента є те, що він може виступати в якості точки відліку для своїх дочірніх елементів.

Давайте уявимо просту ієрархію:

Жовтий розділ має висоту 200px, а позиціонування задано як relative. що перетворює його в точку відліку для всіх дочірніх елементів.

Зелений абзац позиціонується як absolute і може вільно переміщатися щодо жовтого розділу. Встановивши обидва значення left і bottom. ми перемістимо його в лівий нижній кут.

Що станеться, якщо ми одночасно встановимо left і right?

Якщо ширина не задана, застосування left: 0 і right: 0 розтягує елемент на всю ширину. Це еквівалент установки left: 0 і width: 100%.

Якщо ширина встановлена, то значення right відкидається.

Коли position задано як fixed. воно діє як абсолютне. ви можете встановити координати зліва / справа і зверху / знизу.