Урок 6

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

Общее позиционирование

Позиционирование - способ расположения элементов вне сетки.

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

Распологает декоративные элементы.
Добавляет контекст наложения.
Нарушает привычный поток документа.

`position`

.reverse-cowboy {
  position: static; /* default */
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
}

Дополнительные свойства

.reverse-cowboy {
  position: relative;

  top: auto; /* px, rem, %, vh, vw */
  bottom: auto;

  left: auto;
  right: auto;
  z-index: 1: /* integer */
}

Свойства
`top, bottom, left, right`

top и bottom - отступ по вертикали
left и right - отступ по горизонтали
top и left - в приоритете
Игнорируются при position: static

Значения
`top, bottom, left, right`

auto - равняется изначальной позиции
% - считается от высоты/ширины родителя
px, rem, vh, vw - могут принимать отрицательные значения

Если position равно absolute или fixed, а элемент может растягиваются - top и bottom, left и right растягивают элемент

Относительное позиционирование

`position: relative`

Относительное позиционирование сдвигает элемент относительно его обычного положения.

При этом его предыдущее место в потоке документа остается зарезервированным.

<div class="container">
  <div class="box">static box</div>
  <div class="box relative">relative box</div>
  <div class="box">static box</div>
</div>

.relative {
  position: relative;
  top: 50px;
  left: 50px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}
.relative {
  position: relative;
  top: 50px;
  left: 50px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}

Задача 6.1

Шахматная доска

Расположить каждую вторую ячейку с помощью position: relative так, чтобы образовалась шахматная доска.

<div class="chess-deck">
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
  <div class="black-square"></div>
</div>

.chess-deck {
  margin: 20px;
  width: 400px;
  height: 400px;
  outline: 2px solid chocolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.black-square {
  background-color: black;
  flex-shrink: 0;
  width: 12.5%;
  height: 12.5%;
}
.chess-deck {
  margin: 20px;
  width: 400px;
  height: 400px;
  outline: 2px solid chocolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.black-square {
  background-color: black;
  flex-shrink: 0;
  width: 12.5%;
  height: 12.5%;
}

`position: relative` vs `margin`

В 95% случаев мы можем обойтись отступом и не использовать position: relative, в том числе использовать отрицательные отступы (negative margins). Особенность относительного позиционирования - его сдвиг не влияет на другие элементы.

Но все же он используется и в паре с position: absolute!

Пример

Источник: dribble

Абсолютное позиционирование

`position: absolute`

Абсолютное позиционирование удаляет элемент из потока и сдвигает относительно экрана или другого элемента со свойством position (не static).

Чаще всего position: absolute используют в паре с position: relative у родительского элемента (контейнера)!

Расположение относительно экрана

<div class="container">
  <div class="box">1. static box</div>
  <div class="box absolute">2. absolute box</div>
  <div class="box">3. static box</div>
</div>

.absolute {
  position: absolute;
  top: 200px;
  left: 200px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}
.absolute {
  position: absolute;
  top: 200px;
  left: 200px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}

Расположение относительно родителя

<div class="container">
  <div class="box absolute">absolute box</div>
</div>

.container {
  border: 5px solid #E44D26;
  position: relative;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  /* css хак для создания сетки 50x50 пикселей
  https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css */
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.absolute {
  position: absolute;
  top: 100px;
  left: 200px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #C57BDD;
  text-align: center;
}
.container {
  border: 5px solid #E44D26;
  position: relative;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  /* css хак для создания сетки 50x50 пикселей
  https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css */
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.absolute {
  position: absolute;
  top: 100px;
  left: 200px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #C57BDD;
  text-align: center;
}

Задача 6.2

"В яблочко"

Расположить дротик .dart в центре дартса c помощью position: absolute
Раскрасить центр дартса в красный цвет используя .bullseye

<div class="darts-background">
  <div class="dart"></div>
  <div class="bullseye"></div>
</div>

.darts-background {
  background-image: url("/images/units/6-2/darts.png");
  background-size: cover;
  width: 400px;
  height: 400px;
}

.dart {
  background-image: url("/images/units/6-2/dart.png");
  width: 100px;
  height: 77px;
}

.bullseye {
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: red;
}
.darts-background {
  background-image: url("/images/units/6-2/darts.png");
  background-size: cover;
  width: 400px;
  height: 400px;
}

.dart {
  background-image: url("/images/units/6-2/dart.png");
  width: 100px;
  height: 77px;
}

.bullseye {
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: red;
}

Пример

Источник: html5up

Фиксированное позиционирование

`position: fixed`

Фиксированное позиционирование удаляет элемент из потока, сдвигает относительно экрана и фиксирует его на этом месте

<div class="clippy"></div>
<p>
  Знания HTML будут полезны не только Front-End разработчикам но и тем, кто
  строит свое понимание будущего HTML-технологии на основе доступных моделей.
</p>
<p>
  Кроме того, они могут послужить своеобразным мостиком к мировоззрению, к
  сознанию « HTML Electronics» ( этнография), как теперь называют себя
  разработчики системы.
</p>
<p>
  Популярность концепции «HTML Electronics», особенно среди люксогенов,
  объясняется именно тем, что многие читатели от HTML достаточно сложны для
  понимания, а разработчикам очень трудно сформулировать свои идеи на
  человеческом языке.
</p>
<p>
  Разумеется, не все пользователи подписывают свою базу знаний и создают тем
  самым IRC. Но те, кто ее посещает, потом будут ее использовать. Такая политика
  не принесет мгновенных выгод разработчикам системы. А значит, структура
  системы может быть трансформирована, что и делается в большинстве случаев.
</p>
<p>
  Те же, кто упорно отказывается подписывать базу данных, иногда получают
  возможность сохранить все ее базы в резерве. Или же в случае положительного
  результата на сервере создаются буферные подразделения. Такое решение в
  последние годы становится все более популярным.
</p>

.clippy {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: 150px;
  background-image: url("/gifs/clippy.gif");
  background-size: cover;
}

p {
  text-indent: 2em;
  padding: 0 20px;
}
.clippy {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: 150px;
  background-image: url("/gifs/clippy.gif");
  background-size: cover;
}

p {
  text-indent: 2em;
  padding: 0 20px;
}

Задача 6.3

Модальное окно

Разместить модальное окно по центру экрана и затемнить текст за этим окном. Затемнение и центрирование уже сделанно в .modal-background, осталось только правильно его зафиксировать.

<div class="modal-background">
  <div class="modal-window">
    <h2>Error</h2>
    <p>
      ААААААААААА
      ОШИБКА STOP 0x00000001. ЭТО ЖЕ ОЧЕВИДНО КАК ЕЕ РЕШИТЬ
      ПРИШЛО ВРЕМЯ ПЕРЕУСТАНАВИТЬ ШINDOWS
    </p>
  </div>
</div>
<p>
  Знания HTML будут полезны не только Front-End разработчикам но и тем, кто
  строит свое понимание будущего HTML-технологии на основе доступных моделей.
</p>
<p>
  Кроме того, они могут послужить своеобразным мостиком к мировоззрению, к
  сознанию « HTML Electronics» ( этнография), как теперь называют себя
  разработчики системы.
</p>
<p>
  Популярность концепции «HTML Electronics», особенно среди люксогенов,
  объясняется именно тем, что многие читатели от HTML достаточно сложны для
  понимания, а разработчикам очень трудно сформулировать свои идеи на
  человеческом языке.
</p>
<p>
  Разумеется, не все пользователи подписывают свою базу знаний и создают тем
  самым IRC. Но те, кто ее посещает, потом будут ее использовать. Такая политика
  не принесет мгновенных выгод разработчикам системы. А значит, структура
  системы может быть трансформирована, что и делается в большинстве случаев.
</p>
<p>
  Те же, кто упорно отказывается подписывать базу данных, иногда получают
  возможность сохранить все ее базы в резерве. Или же в случае положительного
  результата на сервере создаются буферные подразделения. Такое решение в
  последние годы становится все более популярным.
</p>

.modal-background {
  background-color: rgba(0, 0, 0, .8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-window {
  background-color: silver;
  font-family: "Segoe UI", sans-serif;
  border: 1px solid;
  border-color: rgb(223, 223, 223) rgb(128, 128, 128) rgb(128, 128, 128) rgb(223, 223, 223);
  width: 400px;
}

.modal-background h2 {
  border: 1px solid;
  border-color: inherit;
  background: linear-gradient(to right, navy 0%, powderblue 100%);
  font-size: 12px;
  color: white;
  margin: 0;
  padding: 2px;
}

.modal-background p {
  margin: 10px 20px;
}
.modal-background {
  background-color: rgba(0, 0, 0, .8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-window {
  background-color: silver;
  font-family: "Segoe UI", sans-serif;
  border: 1px solid;
  border-color: rgb(223, 223, 223) rgb(128, 128, 128) rgb(128, 128, 128) rgb(223, 223, 223);
  width: 400px;
}

.modal-background h2 {
  border: 1px solid;
  border-color: inherit;
  background: linear-gradient(to right, navy 0%, powderblue 100%);
  font-size: 12px;
  color: white;
  margin: 0;
  padding: 2px;
}

.modal-background p {
  margin: 10px 20px;
}

Пример

Источник: html5Up

Липкое позиционирование

`position: sticky`

Липкое позиционирование - гибрид относительного и фиксированного позиционирования. Он обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего будет считаться фиксированным, пока не достигнет границы его родителя.

<div class="container">
  <div class="box">static box</div>
  <div class="box sticky">sticky box</div>
  <div class="box">static box</div>
</div>

.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}

.container {
  /* для скролла */
  height: 2000px;
  border: 5px solid #E44D26;
}

body {
  height: 3000px;
}
.sticky {
  position: sticky;
  top: 50px;
  left: 50px;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  background-color: #5858ef;
}

.box:nth-child(3) {
  background-color: #80e880;
}

.container {
  /* для скролла */
  height: 2000px;
  border: 5px solid #E44D26;
}

body {
  height: 3000px;
}

Контекст наложения

Stacking Сontext

Контекст наложения - это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.

<div class="container">
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
  <div class="box absolute">absolute box</div>
</div>

.absolute {
  position: absolute;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  top: 50px;
  left: 50px;
  background-color: #E44D26;
}

.box:nth-child(3) {
  top: 100px;
  left: 100px;
  background-color: #F7DF1E;
}

.box:nth-child(4) {
  background-color: #80e880;
  top: 150px;
  left: 150px;
}

.box:nth-child(5) {
  top: 200px;
  left: 200px;
  background-color: #53C1DF;
}

.box:nth-child(6) {
  background-color: #5858ef;
  top: 250px;
  left: 250px;
}

.box:nth-child(7) {
  background-color: #C57BDD;
  top: 250px;
  left: 250px;
}
.absolute {
  position: absolute;
}

.box {
  width: 150px;
  height: 150px;
  border: 5px dashed #000000;
  text-align: center;
}

.box:nth-child(1) {
  background-color: #d55353;
}

.box:nth-child(2) {
  top: 50px;
  left: 50px;
  background-color: #E44D26;
}

.box:nth-child(3) {
  top: 100px;
  left: 100px;
  background-color: #F7DF1E;
}

.box:nth-child(4) {
  background-color: #80e880;
  top: 150px;
  left: 150px;
}

.box:nth-child(5) {
  top: 200px;
  left: 200px;
  background-color: #53C1DF;
}

.box:nth-child(6) {
  background-color: #5858ef;
  top: 250px;
  left: 250px;
}

.box:nth-child(7) {
  background-color: #C57BDD;
  top: 250px;
  left: 250px;
}

Свойство z-index определяет порядок отрисовки компонента и принимает значения:

auto (default) - не создает внутренний контекст наложения
<integer> - может быть целым положительным и отрицательным числом

<div class="box z-index-positive">z-index: 1 <br /> static</div>
<div class="box absolute z-index-negative">z-index: -1 <br /> absolute</div>
<div class="box absolute z-index-positive">z-index: 1 <br /> absolute</div>
<div class="box absolute ">z-index: 0 <br /> absolute</div>

.absolute {
  position: absolute;
}

.box {
  padding-top: 20px;
  width: 70%;
  height: 70%;
  border-radius: 55%;
  border: 5px dashed #000000;
  text-align: center;
  opacity: 0.85;
}

.box:nth-child(1) {
  z-index: 1;
  background-color:#E44D26;
}

.box:nth-child(2) {
  background-color: #d55353;
  z-index: -1;
  top: 0;
  right: 0;
}

.box:nth-child(3) {
  z-index: 1;
  bottom: 0;
  right: 0;
  background-color: #80e880;
}

.box:nth-child(4) {
  z-index: 0;
  background-color: #F7DF1E;
  bottom: 0;
  left: 0;
}
.absolute {
  position: absolute;
}

.box {
  padding-top: 20px;
  width: 70%;
  height: 70%;
  border-radius: 55%;
  border: 5px dashed #000000;
  text-align: center;
  opacity: 0.85;
}

.box:nth-child(1) {
  z-index: 1;
  background-color:#E44D26;
}

.box:nth-child(2) {
  background-color: #d55353;
  z-index: -1;
  top: 0;
  right: 0;
}

.box:nth-child(3) {
  z-index: 1;
  bottom: 0;
  right: 0;
  background-color: #80e880;
}

.box:nth-child(4) {
  z-index: 0;
  background-color: #F7DF1E;
  bottom: 0;
  left: 0;
}

Внегласное правило CSS 6.5

Не использовать z-index

Управлять передним элементом через его порядок и свойством position, а z-index использовать в крайнем случае.

<div class="box absolute">1. absolute</div>
<div class="box absolute">2. absolute </div>
<div class="box absolute">3. absolute </div>
<div class="box absolute ">4. absolute </div>

.absolute {
  position: absolute;
}

.box {
  padding-top: 20px;
  width: 70%;
  height: 70%;
  border-radius: 55%;
  border: 5px dashed #000000;
  text-align: center;
  opacity: 0.85;
}

.box:nth-child(1) {
  background-color: #d55353;
  right: 0;
}

.box:nth-child(2) {
  background-color: #E44D26;
  top: 0;
}

.box:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: #F7DF1E;
}

.box:nth-child(4) {
  background-color: #80e880;
  bottom: 0;
  right: 0;
}
.absolute {
  position: absolute;
}

.box {
  padding-top: 20px;
  width: 70%;
  height: 70%;
  border-radius: 55%;
  border: 5px dashed #000000;
  text-align: center;
  opacity: 0.85;
}

.box:nth-child(1) {
  background-color: #d55353;
  right: 0;
}

.box:nth-child(2) {
  background-color: #E44D26;
  top: 0;
}

.box:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: #F7DF1E;
}

.box:nth-child(4) {
  background-color: #80e880;
  bottom: 0;
  right: 0;
}

Задача 6.5

"Играем в дурака"

Ваши карты снизу, карты противника сверху. Нужно "побить" все карты провника.

<div class="table">
  <div class="opponent deck">
    <div class="card king"></div>
    <div class="card nine"></div>
    <div class="card jack"></div>
    <div class="card queen"></div>
    <div class="card ten"></div>
  </div>
  <div class="your deck">
    <div class="card ten"></div>
    <div class="card jack"></div>
    <div class="card queen"></div>
    <div class="card king"></div>
    <div class="card ace"></div>
  </div>
</div>

.your .card {
  bottom: 0;
  position: absolute;
}

.your .ten {
  left: 0;
}

.your .jack {
  left: 20px;
}

.your .queen {
  left: 40px;
}

.your .king {
  left: 60px;
}

.your .ace {
  left: 80px;
}

body {
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  width: 500px;
  height: 200px;
  border: 2px solid black;
  position: relative;
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.card {
  width: 73px;
  height: 97px;
  background-image: url("/images/sprites/cards.png");
}

.nine {
  background-position: calc(100% * 8 / 12) calc(100% * 2 / 3);
}

.ten {
  background-position: calc(100% * 9 / 12) calc(100% * 2 / 3);
}

.jack {
  background-position: calc(100% * 10 / 12) calc(100% * 2 / 3);
}

.queen {
  background-position: calc(100% * 11 / 12) calc(100% * 2 / 3);
}

.king {
  background-position: 100% calc(100% * 2 / 3);
}

.ace {
  background-position: 0 calc(100% * 2 / 3);
}

.opponent {
  display: flex;
}

.opponent.deck {
  z-index: 10;
  position: relative;
}

.opponent .card {
  margin-right: 27px;
  flex-shrink: 0;
}
.your .card {
  bottom: 0;
  position: absolute;
}

.your .ten {
  left: 0;
}

.your .jack {
  left: 20px;
}

.your .queen {
  left: 40px;
}

.your .king {
  left: 60px;
}

.your .ace {
  left: 80px;
}

body {
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table {
  width: 500px;
  height: 200px;
  border: 2px solid black;
  position: relative;
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.card {
  width: 73px;
  height: 97px;
  background-image: url("/images/sprites/cards.png");
}

.nine {
  background-position: calc(100% * 8 / 12) calc(100% * 2 / 3);
}

.ten {
  background-position: calc(100% * 9 / 12) calc(100% * 2 / 3);
}

.jack {
  background-position: calc(100% * 10 / 12) calc(100% * 2 / 3);
}

.queen {
  background-position: calc(100% * 11 / 12) calc(100% * 2 / 3);
}

.king {
  background-position: 100% calc(100% * 2 / 3);
}

.ace {
  background-position: 0 calc(100% * 2 / 3);
}

.opponent {
  display: flex;
}

.opponent.deck {
  z-index: 10;
  position: relative;
}

.opponent .card {
  margin-right: 27px;
  flex-shrink: 0;
}

Домашнее задание 6

Спозиционируй позиционируемое

Добавь все позиционируемые элементы со своего шаблона к себе на сайт. Если у тебя в шаблоне нету таких элементов, добавь что-то из другого шаблона или же придумай задачу сам.

Урок 6

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

Общее позиционирование