CSS – позиционирование

Свойство position

CSS-свойство position задает режим позиционирования элементов. Значением по умолчанию является static, которое означает «обычное позиционирование».

• Значение relative обозначает «относительное позиционирование», такой элемент можно перемещать относительно его исходного положения. Элемент для которого применено относительное позиционирование остается в потоке документа (и это очень важно так как при его перемещении наблюдаются интересные эффекты).Свойство top позволяет сместить относительно спозиционированный элемент вверх или вниз относительно его исходного положения. Значение этого свойства обычно задается в пикселях, но можно использовать и другие единицы измерения CSS. Свойство bottom аналогично свойству top, только смещает элемент в другом направлении. Положительное значения свойства bottom сместит элемент вверх, а отрицательное вниз. Свойство left позволяет сместить блок влево или вправо относительно исходного положения. Свойство right аналогично свойству left и тоже смещает элемент в другом направлении.Относительно спозиционированный элемент можно смещать по горизонтали и по вертикали, комбинируя свойства top/bottom со свойствами left/right.При этом при перемещении блока вниз или вверх, нижележащие блоки не сдвигаются, это происходит потому, что относительно спозиционированный элемент на самом деле никуда не смещается. Он остаётся в потоке ровно там же, где и был, а смещается иллюзорная копия блока. Также стоит отметить, что изменение размеров блока влияет на соседние блоки (эти блоки будут отодвигаться), так как блок остался в потоке.
• Значение absolute свойства position задаёт элементу абсолютное позиционирование.Абсолютно спозиционированные элементы обладают следующими особенностями:
  1. Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.
  2. Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).
  3. Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.

  Абсолютное позиционирование изменяет поведение не только блочных элементов (ширина по умолчанию), но и строчных.
  Если строчный элемент спозиционирован абсолютно, то он ведет себя точно так же, как и абсолютно спозиционированный блочный. Например, такому строчному элементу можно задавать размеры с помощью width и height.
  Можно сказать, что есть еще один тип элементов — абсолютно спозиционированные. Такими становятся элементы всех остальных типов (блочные, строчные, блочно-строчные и т.д.), если им задано свойство position:absolute;.
  Свойства left, top, right и bottom по-разному работают для элементов с абсолютным и относительным позиционированием.
  Если для «относительных» элементов эти свойства задают смещение относительно исходной позиции, то для «абсолютных» элементов они задают расположение относительно некой системы координат, как для точки на графике. По умолчанию такой системой координат является окно браузера, а точки начала координат привязаны к его углам.
  Свойство left задает отступ от левого края окна браузера до левого края абсолютно спозиционированного элемента. Если свойству задать отрицательное значение, то элемент сместится за левый край браузера (при этом полоса прокрутки не появится). Свойство top задает отступ от верхнего края окна браузера до верхнего края абсолютно спозиционированного элемента. Свойство right задает отступ от правого края окна браузера до правого края «абсолютного» элемента. Это свойство позволяет легко прижать элемент любой ширины к правому краю окна. Если задать отрицательное значение для right, то элемент сместится за край окна, но при этом появится полоса прокрутки. Свойство bottom задает отступ от нижнего края окна браузера до нижнего края «абсолютного» элемента. Отрицательное значение bottom затолкнет элемент за нижний край окна браузера и при этом появится полоса прокрутки.

  Таким образом, с помощью свойств left + top можно позиционировать «абсолютный» элемент относительно левого верхнего угла окна браузера, с помощью top + right можно позиционировать элементы от правого верхнего угла.

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

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

  Неявная точка отсчета — это то место, где находился элемент до того, как ему задали абсолютное позиционирование. Если «абсолютному» элементу не задавать свойства left … bottom, то он выпадет из потока, но останется на прежнем месте. Такой элемент можно сместить из неявной точки отсчета с помощью свойства margin. Оно будет работать примерно так же, как и свойства left … bottom для «относительного» элемента. Кстати, когда значение для left не задано, оно равно auto. То же верно и для оставшихся трёх свойств. С помощью значения auto можно возвращать «абсолютные» элементы на исходное положение.

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

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

Свойство z-index

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

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

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

Центрирование элементов

Наиболее частой задачей при верстке элементов является расположение текста, картинок или блоков в центре других блоков.

Расположение текста в центре параграфа или заголовка (центр по горизонтали)

Это наиболее типичная задача расположение строки текста по средине абзаца иди заголовка, которая решается с помощью свойства  text-align: center , которая заставляет параграф нарисовать текст по центру между границами блока.

Расположение блоков и изображений в горизонтальном центре

Такое поведение можно достичь для блоков с фиксированной шириной путем установки правого и левого внешнего отступа в значение auto.  margin-left: auto; margin-right: auto; width: 6em  – тут важно понимать, что блок должен иметь фиксированную ширину (то есть не растягиваться).  Для изображений прием схожий  display: block; margin-left: auto; margin-right: auto – здесь режим отображения изменен на блочный  и заданы автоматические внешние отступы слева и справа.

Вертикальное центрирование в CSS2

До появления CSS3 решением по расположению элементов в центре некоторого блока выполнялось через установку режима отображения в режим “ячейка таблицы” и тогда применялось к нему вертикальное выравнивание, например:  min-height: 10em; display: table-cell; vertical-align: middle; 

Вертикальное центрирование в CSS3

Для решение данной проблемы есть два подхода: первый это создание абсолютно позиционированного элемента центрированного относительно элемента с режимом позиционирования относительный.

Пример:

В этом примере действует несколько правил (помеченных номерами):

1. Создается контейнер с режимом позиционирования “относительный”, который будет служить точкой отсчета для блоков с абсолютным позиционированием;
2. Перевод элемента в режим абсолютного позиционирования;
3. Сдвиг элемента на половину высоты контейнера (50% – означает половину высоты родительского контейнера);
4. Сдвиг элемента при помощи трансформации на 50% его собственной высоты (при этом в свойстве translate(0, -50%) – 50% относится к высоте самого элемента, а не его родителя).

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

Начиная с 2015 года доступен новый способ связанный с новым механизмом flex. В этом случае для некоторого контейнера устанавливается режим отображения flex, тогда все непосредственно вложенные в контейнер элементы становятся флекс – элементами на которые влияет механизм позиционирования, например:

Расположение элементов по центру другого элемента

Если необходимо установить элемент точно по центру другого элемента, то применяется подход с абсолютными и относительно позиционированными элементами:

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

С механизмом flex все еще проще:

В этом случае align-items – определяет выравнивание по вертикале, а justify-content – задает выравнивание по горизонтали (и хотя этот режим намного более комплексный, в простом случае он дает именно такой эффект). Кроме того, побочным эффектом становится, то, что дочерний элемент, в этом  случае будет создаваться максимально маленьким.

Расположение элемента по центру области просмотра (viewport)

По умолчанию блок позиционируется относительно области просмотра, которая в броузере определяется его окном. Вот пример кода позиционирования:

Значение margin-right: -50% необходимо для компенсации left: 50%, а именно значение задание left ограничит доступную ширину для элемента в 50% родителя. Во время отображения браузер будет отображать элемент не шире чем на половину ширины контейнера. При указании границы справа -50%, мы возвращаем блоку максимально возможную ширину в размере полной ширины контейнера. При удалении margin-right: -50% и изменении размеров окна, вы увидите, что предложения внутри блока будут разбиты уже тогда, когда окно еще в два раза шире строк текста.