05. Позиционирование элементов

Содержание раздела:
  1. Абсолютное позиционирование
  2. Фиксированное позиционирование
  3. Относительное позиционирование
  4. Z-индекс, вид и видимость
  5. Пример 1
  6. Пример 2
  7. Пример 3
  8. Практикум

Значение static размещает элемент на странице так, как он располагался бы без всякого позиционирования, поэтому использование этого значения не даёт ничего нового. Остальные виды позиционирования рассмотрены в соответствующих разделах.

Позиционирование — это управление размещениемразмерами, как это и не покажется странным) элемента в окне браузера.

CSS предлагает для позиционирования свойство position. Значения этого свойства:

  • absolute (абсолютное позиционирование);
  • fixed (фиксированное позиционирование);
  • relative (относительное позиционирование);
  • static (статическое позиционирование).

Свойство z-index позволяет позиционировать элемент по слоям (как бы в направлении оси z, перпендикулярной плоскости экрана).

Кратко о свойстве position:

  • static — элемент в потоке
  • absolute — элемент удаляется из потока и перемещается относительно блока-контейнера
  • relative — элемент сохраняет своё место в потоке, а сам перемещается относительно этого места, если заданы ненулевые смещения
  • fixed — совпадает с absolute, но перемещения задаются относительно области просмотра (окна браузера)
position
Значения: static | absolute | relative | fixed | inherit
По умолчанию: static
Область применения: все элементы
Наследование: нет