Поток документа

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

Элементы можно вкладывать друг в друга. Чем раньше в коде расположен элемент, тем выше он расположен на странице.

Некоторые типы элементов могут вести себя в потоке более сложно. Например, они могут располагаться в несколько колонок, как блочно-строчные элементы. Эти типы проходились в курсе «Блочная модель документа».

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

В этом курсе мы будем изучать свойства, которые изменяют обычное поведение элементов в потоке.

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

• гибкий механизм расположения элементов
• не используется для создания сеток
• используется для создания декоративных эффектов и многослойных элементов интерфейса

Свойств:

position: static (по умолчанию)

position: relative (относительное)

при смещении - на самом деле сам элемент не смещается, а смещается его визуальная копия и его место в потоке остается. (место в потоке сохраняет)

Нельзя использовать одновременно противоположные свойства left-right, top-bottom

Абсолютное позиционирование[8/20]

Значениеabsoluteсвойстваpositionзадаёт элементу абсолютное позиционирование.

Абсолютно спозиционированные элементы обладают следующими особенностями:

1. Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
2. Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
3. Остаются на том же месте, где были, если не заданы значения свойствtop,left,right,bottom.

Он выпадает из потока полностью! Можно использовать противоположные свойства, но тогда нельзя задавать фиксированные width и height.

Также абсолютное позиционирование сбрасывает ширину!

Точка привязки может быть родитель relativeили absolute

Чтобы абсолютный элемент разместить в центре:

.center {
    position: absolute;
    top: 50%;
    left: 50%;

    /* обязательно нужно задать фиксированные размеры */
    width: 100px;
    height: 100px;

    /* сдвигаем на половину размеров */
    margin-top: -50px;
    margin-left: -50px;
}

хорошо для центрирования декоративных элементов с фиксированными размерами.

Если не задавать ясно top, right, bottom, left - то их значения будет auto. Это будет значить что элемент будет располагаться там же где его создали, только выйдет из потока.

Фиксированное позиционирование[18/20]

Значениеfixedсвойстваpositionзадаёт элементу фиксированное позиционирование.

Фиксированное позиционирование похоже на абсолютное, но есть и отличия:

1. Фиксированный элемент тоже выпадает из потока.
2. Фиксированный элемент привязывается к определенной точке в окне браузера и остается на ней всегда, даже при прокрутке страницы.
3. Фиксированный элемент можно позиционировать с помощью свойствtop,left,right,bottom, но точка отсчета всегда привязана к окну браузера.

Можете представить себе фиксированный элемент, как стикер, который наклеен на монитор. Такие элементы часто применяют для создания навигационных панелей, привязанных к верхней или нижней части окна браузера.

• похоже на абсолютное позиционирования
• участвует в "наслаивании"
• НО! отсчет координат всегда привязан к окну браузера (не к относительному/абсолютному элементу) - можно даже сказать что привязана к видимой области экрана (viewport окна браузера)
  • элемент "прибивается" к точке экрана и не смещается даже при прокрутке

z-index или кто кого перекроет[19/20]

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

C помощью CSS-свойстваz-indexможно управлять тем, как перекрываются блоки. Значением этого свойства может быть целое число. Чем большеz-index, тем выше располагается блок.

Cвойствоz-indexработает для элементов, у которыхpositionзадано какabsolute,fixedиrelative. Таким образом, «относительный» элемент может перекрывать «абсолютный».

Управление порядком слоёв

z-index: {number}

• у кого больше индекс, тот и выше
• работает только для relative, absolute, fixedэлементов
• !!!выше тот, кто дальше в коде, если индекса нет или он одинаковый

Порядок слоёв идет последовательно, с начало соседи, потом их child-элементы:

вот по этому layer1 c z-index: 5 выше layer4 сz-index: 6