Значение 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, за исключением того, что скроллбары показываются, только там, где они действительно необходимы.
