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

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

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

1. Фиксированный элемент тоже выпадает из потока.

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

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

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

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

Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы.

Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности.

Липкое позиционирование осуществляется с помощью значения sticky свойства position. При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный

Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom. При горизонтальной прокрутке будут работать только свойства left и right. Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента.

Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto.

Z-index или кто кого перекроет

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

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

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

Например, если взять наш первый пример с относительным позиционированием и применить к нему отрицательный z-index, то он окажется позади всех блоков.

До

После

 

О свойстве Overflow

Каждый элемент на странице является прямоугольником. Размеры, позиционирование и поведение может регулироваться через CSS. Под поведением подразумевается то, как элемент обрабатывает события, когда изменяется контент снаружи и внутри. Например, если вы не установили элементу высоту, то она будет увеличиваться пока в элементе не поместится все содержимое. Но что случится, когда вы все-таки установите высоту или ширину для элемента, а содержимое не поместится? Здесь нам понадобится CSS-свойство overflow, которое позволяет вам указать как поступать в таких случаях.

Всего существует четыре значения для этого свойства:

· visible (по умолчанию);

· hidden;

· scroll;

· auto.

Также есть родственные свойства overflow-y и overflow-x, которые используются гораздо реже. Давайте рассмотрим поведение элементов с фиксированными размерами для каждого значения overflow и обсудим общие случаи использования.

Visible

Если вы не укажете свойство overflow, то по умолчанию оно будет равно visible. Итак, в основном, нет смысла явно устанавливать свойство в visible, до тех пор, пока оно не будет переназначено где-нибудь в другом месте, а вам потребуется поведение по умолчанию.

Здесь важно помнить, что даже если снаружи элемента есть видимый контент, этот контент не сместится на странице. Например:

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

Hidden

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

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

Scroll

Если элементу установлено значение scroll, то он будет скрывать не поместившееся содержимое, но появятся скроллбары, чтобы была возможность просмотреть весь контент.

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

Auto

Значение auto похоже на значение scroll, за исключением того, что скроллбары показываются, только там, где они действительно необходимы.