Позиционирование

position - это фундаментальное свойство CSS, которое позволяет определить, в каком месте браузер будет отрисовывать элементы.

Свойство position обладает следующими значениями:

  • static - значение по умолчанию. Элемент будет отрисован "нормально"
  • relative - позволяет отрисовать элемент "нормально", но, благодаря CSS-свойствам top, right, bottom и left,появляется возможность сместить блок из "нормальной" позиции.
  • absolute - самое интересное свойство. Положение блока рассчитывается при помощи top, right, bottom и left,но не относительно изначального места, а относительно ближайшего родителя с position не равным static или элемента body.
  • fixed - положение относительно границ экрана. Также рассчитывается с помощью top, right, bottom и left, но родителем является сам экран.
  • sticky - "прилипает" к границам экрана в том случае, если выходит за границы экрана. Также устанавливается при помощи top, right, bottom и left.Подробнее тут: Как на самом деле работает position: sticky в CSS

Поэкспериментировать с position: absolute можно здесь:

Запустить пример

Поэкспериментировать с position: sticky можно тут:

Запустить пример

Смещение блока: top, right, bottom и left

По умолчанию значением этих свойств является auto. Мы можем использовать для задания положения, например, px или %.

Используются в купе с не статично спозиционированными блоками.
  • top смещает блок сверху вниз;
  • bottom смещает блок снизу вверх;
  • left смещает блок слева направо;
  • right смещает блок справа налево.

Слои и z-index

Иногда, сместив один блок относительно другого, они начинают "наезжать" друг на друга. Причём, не всегда так, как мы этого хотим.Что если мы хотим, чтобы блок, который отрисовался "под" вторым блоком, был отрисован "над" ним? Для этого на помощь приходит свойство z-index. Значением этого свойства может быть просто любое число, без единиц измерения. Установив z-index: 2 для первого блока и z-index: 1 для второго, мы точно будем знать, что первый блок будет отрисован "над" вторым, так как его z-index больше. По умолчанию же, "над" отрисовывается тот блок, который в структуре HTML был ближе к концу документа.

Если вы математик, то вам будет понятно следующее объяснение: наш экран имеет две координаты: X и Y. Координаты начинаются из верхнего левого угла.X направлен вправо. Y — вниз. А теперь представим себе ещё одну координату — Z. Она направлена из той же точки, но перпендикулярно экрану, на зрителя. Это и есть z-index.

Если вы работали с фотошопом или какими-то другими графическими редакторами, то вам знакомо понятие "слои". Мы можем располагать различные изображения на этих слоях, а в случае перекрытия, показан будет тот слой, что находится выше. И это тоже z-index.

Раскомментируйте строку с z-index, чтобы понять, как работает это свойство.

Посмотреть задание