position - это фундаментальное свойство CSS, которое позволяет определить, в каком месте браузер будет отрисовывать элементы.
Свойство position обладает следующими значениями:
- static - значение по умолчанию. Элемент будет отрисован "нормально"
- relative - позволяет отрисовать элемент "нормально", но, благодаря CSS-свойствам top, right, bottom и left, появляется возможность сместить блок из "нормальной" позиции.
- absolute - самое интересное свойство. Положение блока рассчитывается при помощи top, right, bottom и left,но не относительно изначального места, а относительно ближайшего родителя с position не равным static или элемента body. Поэкспериментировать с position: absolute можно здесь: https://codepen.io/artik-man/pen/gOYwLmY
- fixed - положение относительно границ экрана. Также рассчитывается с помощью top, right, bottom и left, но родителем является сам экран.
- sticky - "прилипает" к границам экрана в том случае, если выходит за границы экрана. Также устанавливается при помощи top, right, bottom и left.Подробнее тут: Как на самом деле работает position: sticky в CSS Поэкспериментировать с position: sticky можно тут:
https://codepen.io/artik-man/pen/rNBMWzp
Смещение блока: 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.
Для закрепления материала, взгляните сюда:
https://codepen.io/artik-man/pen/KKPgNrX
Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues