CSS position sticky недостатки липкого позиционирования, проблемы и примеры их решения


Содержание материала:

Прилипающий блок CSS

Как работает position: sticky;

Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.

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

Недавно узнал об этом простом и эффективном способе позиционировании элементов на сайте. В этой статье покажу насколько все просто решается задача липкого позиционирования с помощью свойства css — sticky.

Очень часто бывает необходимо закрепить элементы сайта при скроллинге на определенной позиции в пределах одного блока. Например, у вас есть меню которое находится под шапкой сайта и при скроллинге, когда меню достигает верхней позиции браузера, его необходимо закрепить. Для этой задачи в css и появилось новое позиционирование sticky.

Элемент с «прилипающим» позиционированием (position: sticky) рассматривается как гибрид относительного и фиксированного элементов.

В данном примере элемент с классом banner будет скроллится пока не достигнет уровня от верхнего края браузера 150px. Как только расстояние от верхнего края браузера до нижней границы родительского элемента будет меньше высоты элемента с позиционирование sticky, свойство position: sticky, как обычное относительное позиционирование.

Так как элемент с position: sticky перемещается в пределах родительского элемента необходимо чтобы родительский элемент минус отступ сверху был значительно выше высоты самого элемента с позиционированием sticky. В противном случае данное свойство sticky сработает как обычный position: relative.

На данный момент свойство position: sticky является новым, поэтому не поддерживается всеми старыми браузерами.

Смотрим 2 примера в видео, ставим лайки и делимся с друзьями.

position: sticky

В CSS появилось новое нестандартное значение для позиционирования под названием sticky , предложенное Эдвардом О`Коннером в рассылке www-style.

Что это такое и с чем его едят

Это гибрид значений relative и fixed . В результате присвоения элементу значения sticky для позиционирования, он прокручивается вместе со страницей как статический, но только до указанного предела, после которого становится фиксированным.

Как использовать

Для примера добавьте в ваш CSS файл стили для элемента с классом .sticky , дописав правила с вендорными префиксами.

Этим самым вы заставите элемент быть position: relative до тех пор, пока пользователь не прокрутит страницу на 15px вниз относительно родительского элемента. После этого блок с классом .sticky станет position: fixed , то есть зафиксируется на странице.

Подробнее изучить новое поведением вы можете в специальном демо, открыв его в свежей версии Chrome Canary.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Всем привет, меня зовут Анна Блок, и эта статья будет посвящена довольно «острой» теме, которая связана с позиционированием элементов. Мы поговорим о таком свойстве как position и его значениях: relative, absolute и fixed. Также мы поговорим о таком значении как static, но по большей степени нас будет интересовать именно первая «троица», так как она чаще всего используется на сайтах.

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

Position

Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.

Relative

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

Absolute

Это абсолютное позиционирование. Когда мы указываем данное назначение, то мы даем понять, что элемент будет абсолютно позиционирован. При этом другие элементы отображаются на веб-странице так, словно этого абсолютного позиционирования на странице нет. Если у элемента стоит position: absolute , то мы также можем управлять его местоположение при помощи каких свойств как: left, top, right и bottom.

Static

Это статичное позиционирование. В этом случае элементы отображаются, как обычно. Использование таких свойств как: left, top, right и bottom не приводит ни каким результатам.

Fixed

Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.

Sticky

Это сочетание относительного и фиксированного позиционирования. Когда мы пишем position: sticky , то элемент рассматривается как относительный, пока он не пересекает определённый порог, после чего он уже будет рассматриваться как фиксированный. Как правило, такое значение применяется для фиксации заголовка на одном месте до тех пор, пока содержимое, к которому относится заголовок, прокручивается на странице.

Стоит отметить, что свойство position поддерживается браузерами уже довольно давно, но на тот момент поддерживалась только три свойства: static, relative и absolute и уже начиная с IE 7, появилась поддержка fixed. Но при этом относительно новое значение sticky не поддерживается Internet Explorer-ом совсем и относительная поддержка у Edge начинается только с шестнадцатой версии. Во всех остальных браузерах такое свойство, как position поддерживается без проблем.

Практика

Теперь давайте перейдем к практике, и я покажу, как на деле работают эти свойства. В HTML зададим блок под названием box и внутри него установим элемент под названием item.

Для box мы визуально зададим пространство, задав ему ширину и высоту, добавив обводку.

Далее мы стилизуем item. Также установим для него ширину, высоту, цвет фона и скругление уголов блока.

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

Absolute

Давайте предположим, что нам необходимо разместить круг в том же месте, как это отображено на картинке. Как это сделать? Если вспомнить теорию, то там было сказано, что такое свойство, как position: absolute задает абсолютное позиционирование для элемента, поэтому давайте так и поступим.
Элементу item добавим position: absolute. Однако для того, что бы наш position работал, нам необходимо начать работу в связке с такими свойствами, как: left, top, right и bottom. В зависимости положения объекта, мы будем использовать то или иное свойство. В нашем случае нам нужно разместить его относительно правой и нижней сторон квадрата.

И тут мы видим первую проблему, с которой сталкиваются новички — круг вышел за приделы блока box. Вы должны помнить, что если вы в CSS не указали, какой блок является родителем (относительно какого блока должен позиционироваться элемент), то он позиционирует дочерний элемент относительно всего тега body. Решается эта проблема добавлением свойства relative для блока box.

Топ-пост этого месяца:  Как установить шаблон Joomla

После того, как мы это сделали, наша точка вернулась на необходимое место.

Ознакомиться подробнее с HTML и CSS можно тут:

Fixed
Добавим в блок box текста, что создать автоматический скролл на странице.

Теперь наша задача сделать так, что бы наша точка «преследовала» нас, и все время находилась в одной части экрана, как на картинке.

Для этого блоку item задаем position: fixed и мы видим, что она как бы «выпадает» из потока и по умолчанию ей присваиваются такие свойства, как top: 0 и left: 0 . Но при этом, конечно же, мы их всегда можем сбросить, если укажем конкретные значения

И теперь в момент, когда мы скролим страницу эта точка «идет» за нами, она зафиксировалась в одной части экрана.

Ознакомиться подробнее с HTML и CSS можно тут:

Static
Я скопировала все стили, которые у нас применялись в первом примере и теперь мы поговорим о position: static . По умолчанию, если для элемента вы не устанавливаете position , то автоматически у него подразумевается такое значение, как position: static . Давайте представим, что в какой-то момент вам предстоит заняться адаптивом сайта. Вероятнее всего, вам потребуется менять ширину у блока box.

С этими значениями блок будет сворачиваться при любой ширине экрана, но при этом position у блока item мы можем установить, как position: static .

И как мы видим, он игнорирует все, что мы писали ранее, это right и bottom. Даже, если мы изменим значения, сделаем их больше или меньше это никак не повлияет на расположение данного элемента, так как position: static сбрасывает все это. Поэтому, если в какой-то момент вам необходимо сбросить стили, то помните, что достаточно прописать только position: static и в таком случае right , bottom , left , top менять в @media не потребуется.

Ознакомиться подробнее с HTML и CSS можно тут:

Sticky
Итак, теперь давайте рассмотрим четвертый пример. В нем мы создадим блок header, внутри которого содержится текст. Рядом создадим блок main, внутри которого размести блок side с текстом, что бы на странице появился скрол и блок sticky с заголовком. Под блоком main разместим еще один блок и назовем его footer с добавлением текста.

Таким образом, у нас получилась чистая разметка HTML. Ее мы и будем стилизовать. Начнем с блока side, установив ему ширину.

Далее стилизуем заголовок, задав ему цвет текста и цвет фона.

Далее главному блоку sticky добавим position: sticky . Визуально пока у нас ничего не изменилось, но при этом, что бы он «выпал» из потока нужно работать в связке с float , поэтому добавляем ему float: right . Как мы видим, при скроле он у нас не цепляется наверх, поэтому чтобы это исправить необходимо дописать top: 0 и задать ширину.

Теперь при скроле заголовок цепляется к верху и продолжает «идти» за нами по мере следования по странице.

Ознакомиться подробнее с HTML и CSS можно тут:

Вместо заключения

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

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Position sticky не работает z-index

09.05.2020, 23:56

Position: sticky
Доброго дня! До меня что-то не доходит смысл этого позиционирования. Кто знаком, объясните.

CSS свойство position sticky, расстояние задержки
Всем привет, немогу понять как у элемента со свойством position:sticky указать расстояние (или.

position и z-index в меню
Ребят, помогите пожалуйста, не могу сделать чтобы фон у основного пункта меню перекрывал фон.

position

Свойство position — используется для настройки позиционирования элемента на странице.

Общие сведения

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

Все элементы на странице по умолчанию позиционируются «статично». Статичное позиционирование элемента определяет его расположение на странице в нормальном потоке. Когда элемент упоминается как на позиционированный элемент, это означает что его свойство position было изменено со static на одно из четырёх доступных значений: relative , absolute , fixed , sticky .

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

Синтаксис свойства

  • Синтаксис:
  • Значение по умолчанию: static
  • Применяется: ко всем элементам
  • Наследуется: нет
  • Анимируется: нет

Значения свойства

  • static — блок ведёт себя обычным образом и располагается в соответствии с нормальным потоком страницы. Свойства top , right , bottom , и left не применяются.
  • relative — позиция блока вычисляется в соответствии с нормальным потоком страницы, а после этого блок смещается относительно своего вычисленного положения с помощью свойств top, right, bottom, и left.
  • absolute — блок выпадает из нормального потока страницы. Позиция блока определяется с помощью свойств top, right, bottom, и left, относительно своего ближайшего позиционированного родительского элемента.
  • fixed — блок выпадает из нормального потока страницы. Позиция блока определяется с помощью свойств top, right, bottom, и left, относительно области просмотра (viewport).
  • sticky — это гибрид значений relative и fixed . Элемент будет обрабатываться как relative до тех пор пока не пересечёт заданный порог, после этого он будет обрабатываться как fixed .

Поддержка браузерами

Основные значения свойства position работают во всех основных браузерах.

5 вещей, которые вы не знали о типах позиционирования CSS

В этой статье мы более подробно разберем несколько малоизвестных аспектов, связанных с методами позиционирования CSS . Но сначала кратко рассмотрим доступные на сегодняшний день типы позиционирования. Такие, как CSS position relative .

Обзор доступных типов позиционирования CSS

Свойство CSS position позволяет задать тип позиционирования элемента.

Параметры позиционирования CSS

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

Для этого мы задаем одно из следующих значений:

  • position relative CSS ;
  • absolute ;
  • fixed ;
  • sticky .

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

Начальное значение этих свойств — auto .

Элемент, для свойства position которого устанавливается значение absolute или fixed , называется абсолютно позиционированным элементом. Обратите внимание, что при позиционировании элемента может использоваться свойство z-index, чтобы указать его место в стеке.

Основные отличия свойств позиционирования CSS

Кратко рассмотрим три основных различия между доступными типами позиционирования:

  • Абсолютно позиционированный элемент полностью удаляется из нормального потока. Соседние элементы того же уровня занимают его пространство;
  • За элементами с CSS position relative или stickily сохраняется их пространство. Соседние элементы не могут занимать пространство, отведенное для него. Но под смещение этого элемента не отводится места. Смещения полностью игнорируются, и в результате элементы могут накладываться друг на друга;
  • fixed ( подкатегория абсолютного позиционирования ) — всегда позиционируется относительно окна просмотра. За исключением родительского элемента, который имеет свойство transform. Последние версии всех браузеров поддерживает такое поведение;
  • sticky – элемент позиционируется относительно ближайшего родительского элемента с полосой прокрутки. Если такой родительский элемент отсутствует, то позиционирование происходит относительно окна просмотра.

Как работают все эти типы, можно увидеть в следующем демо:

Примечание: Значение sticky по-прежнему рассматривается как экспериментальная технология с ограниченной поддержкой браузерами . Конечно, можно использовать полифилл ( например, stickyfill ), чтобы добавить этот функционал для браузеров, которые изначально не поддерживают его.

Позиционирование элементов с типом absolute

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

Топ-пост этого месяца:  Курс по JavaScript. Математические преобразования

В приведенной ниже демо-версии проиллюстрировано данное поведение:

В примере мы задаем зеленому полю тип позиционирования absolute со значением смещения bottom:0 и left:0 . Кроме этого мы не указываем тип позиционирования для его прямого родителя ( красное поле ).

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

Абсолютно позиционированные элементы игнорируют свойство float

Если элемент перемещается влево или вправо, и при этом мы устанавливаем для него тип позиционирования absolute или fixed , то значение свойства float становится равным none. Но если мы устанавливаем тип позиционирования position relative CSS , элемент остается плавающим.

Посмотрите приведенное ниже демо:

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

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

Встроенный элемент, который позиционирован, как absolute или fixed , приобретает характеристики элементов уровня блока.

Мы определяем два различных элемента. Первый из них ( зеленое поле ) является блочным элементом ( т.е. div ). Второй ( красное поле ) является встроенным элементом ( span ). Обратите внимание, что у нас отображается только зеленое поле.

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

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

У абсолютно позиционированных элементов поля не объединяются

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

Поля абсолютно позиционированных элементов не объединяются ни с какими другими полями.

Рассмотрим следующий пример:

В этой демо-версии элемент изначально имеет поля 20px . Кроме этого его верхнее поле объединяется с верхним полем родительского элемента, которое также равно 20px . Как видите, верхнее поле не объединяется с соответствующим полем родительского элемента только тогда, когда мы позиционируем элемент абсолютно, а не CSS position relative top left .

Чтобы предотвратить объединение полей, нужен небольшой отступ или рамка. Мы должны применить это правило к родительскому или дочернему элементу. Другой вариант — добавить класс clearfix ( в нашем примере ) для родительского элемента.

Позиционирование элементов в пикселях и процентах

Вы когда-нибудь использовали проценты вместо пикселей для CSS position relative по центру? Если да, то вы заметили, что вычисленные значения смещения различны в зависимости от единиц измерения CSS ( пикселей или процентов ), которые вы используете.

Посмотрим, что говорится о смещениях, которые объявляются в процентах, в спецификации:

Смещение – это процент от ширины (для left или right ) или высоты (для top и bottom ) блока, содержащего элемент. Для элементов с позиционированием stickily смещение представляет собой процент от ширины ( left или right ) или высоты (для top и bottom ) окна. Допускаются отрицательные значения. Когда мы определяем значение смещения в процентах, положение целевого элемента зависит от ширины (для смещения left или right ) и высоты (для смещения top и bottom ) его родительского элемента.

Приведенное ниже демо иллюстрирует эту разницу:

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

Но когда мы используем для смещений проценты, позиция элемента зависит от размеров его родительского элемента. На приведенном ниже рисунке показано, как вычисляется новое положение CSS position relative ( в процентах ):

Примечание: Свойство transform (вместе с различными функциями translate ) также позволяет изменить положение элемента. Но если мы будем использовать проценты, элемент будет позиционироваться относительно своих размеров, а не относительно размеров родительского элемента ( в отличие от смещений ).

Заключение

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

Данная публикация представляет собой перевод статьи « 5 Things You Might Not Know About the CSS Positioning Types » , подготовленной дружной командой проекта Интернет-технологии.ру

position

На этой странице

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Этот источник тоже нуждается в переводе, но недоступен.

Описание

Свойство CSS position позволяет выбрать альтернативные правила позиционирования элементов с целью упрощения использования скриптовых анимационных эффектов.

Начальное значение static
Применяется к все элементы
Наследуется нет
Отображение визуальный
Обработка значения как указано
Animation type discrete
Канонический порядок уникальный неоднозначный порядок, определённый формальной грамматикой
Создаёт контекст наложения да

Позиционируемый элемент — это элемент, положение которого задаётся по relative , absolute , fixed , или sticky .
Относительно позиционируемый элемент — только по relative .
Абсолютно позиционируемый элемент — по absolute , или fixed .
Липко позиционируемый элемент (stickily) — по sticky .

Свойства top , right , bottom , и left устанавливают положение позиционируемых элементов.

Синтаксис

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

static Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства top , right , bottom , left и z-index не применяются к данному элементу. Это значение по умолчанию. relative Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений top , right , bottom и left . Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была static . Это значение создает новый контекст наложения, когда значение z-index не auto . Его влияние на элементы table-*-group , table-row , table-column , table-cell и table-caption не определено. absolute Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного содержащего блока (en). Его конечная позиция определяется значениями top , right , bottom , и left .

Это значение создает новый контекст наложения, когда значение z-index не auto . Поля абсолютно позиционированных коробок не сворачиваются с другими полями. fixed Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного содержащего блока (en), установленного viewport, за исключением случаев, когда один из его предков имеет свойство transform , perspective , или filter , установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с perspective и filter , способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями top , right , bottom и left . Это значение всегда создает новый контекст наложения. В печатных документах элемент помещается в одно и то же положение на каждой странице. sticky Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержащего блока (en) (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов. Это значение всегда создает новый контекст наложения. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow от hidden , scroll , auto , или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Типы позиционирования

  • Позиционируемый элемент — это элемент, у которого вычисленное значение position является либо relative , absolute , fixed , либо sticky .
    (Другими словами, это вce, кроме static .)
  • Относительно позиционируемый элемент является элементом, вычисленное значение position которого является relative . Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left и right задают горизонтальное смещение.
  • Абсолютно позиционируемый элемент — это элемент, чье вычисленное значение position является absolute или fixed . top , right , bottom и left задают смещения от краёв содержащего блок элемента (en).
    (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению.
  • Элемент с липкой позицией — это элемент, у которого значение вычисленного position является sticky . Он рассматривается как относительно позиционированный до тех пор, пока содержащий его блок (en) не пересечёт указанный порог (например, установка top для значения, отличного от auto ) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край содержащего его блока.
Топ-пост этого месяца:  Освежаем память – займемся удалением записей в PHP

В большинстве случаев абсолютно cпозиционированные элементы, которые имеют height и width устанавленные в auto , имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как top , так и bottom и оставляя height неопределенным (то есть , auto ). Ими также можно заполнить доступное горизонтальное пространство, указав как left , так и right и оставляя width как auto .

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

  • Если указаны top и bottom (технически, а не auto ) — приоритет у top .
  • Если указаны как left , так и right : приоритет у left , когда direction ltr (английский, горизонтальный японский и т. д.), приоритет у right , когда direction является rtl (персидский , Арабский, иврит и т. д.).

Прилепленное позиционирование с помощью CSS

Russian (Pусский) translation by Nataly Birch (you can also view the original English article)

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

Исторически сложилось так, что для создания эффекта нам нужен был JavaScript. Однако, «прилепленное» позиционирование было предложено в качестве нового стандарта в CSS, как альтернатива уже существующим типам. Что позволило воссоздавать этот эффект только при помощи CSS. Давайте посмотрим как это работает на практике!

«Прилепленное» позиционирование

sticky — это новое значение свойства position, что и означает «прилепленный». Оно было добавлено в новую спецификацию CSS3. Его работа схожа на относительное позиционирование т.к. он тоже ничего не убирает из потока. Другими словами, «прилепленный» элемент никак не влияет на позиционирование смежных элементов и не рушит родительский элемент.

В примере ниже, мы назначили боковой панели с идентификатором #sidebar «прилепленное» позиционирование, а также назначили расстояние до верхнего края родительского элемента 10 пикселей, используя свойство top: 10px. Значение top нам необходимо для того, чтобы назначит расстояние от верхнего края окна браузера.

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

Вложенность

Более того, «прилепленное» позиционирование будет работать также с отдельным блоком с прокруткой или переполненным элементом. В этот раз мы установим значение top в 15 пикселей для того чтобы дать сайдбару чуть больше пространства сверху, когда он прилеплен.

Сайдбар будет оставаться прилепленным на всей высоте родительского блока (т.е. когда дно родительского блока достигнет уровня дна сайдбара, он «оттолкнет» его)

Легко и просто, не так ли?

Кросс-браузерная поддержка

Если вы посмотрите эту демку в таких браузерах как Chrome, Opera, или Internet Explorer (и Blink), то вы увидите, что она не работает. Причина в том, что эти браузеры не поддерживают «прилепленное» позиционирование.

Поддержка «прилепленного» позиционирования браузерами

Переключившись на движок от Blink, команда разработчиков убрала из Chrome 28 поддержку «прилепленного» позиционирования. Более того, команда даже убрала возможность включать эту поддержку через chrome://flags. Они объяснили это так:

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

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

Использование полифила

Для того чтобы помочь браузерам, которые не поддерживают «прилепленное» позиционирование, мы будем использовать полифил, созданный Олегом Корсунским. Он называется — stickyfill. Эта библиотека работает прекрасно в совершенно разных ситуациях. В независимости от того имеет ли заданный компонент внутренние и внешние отступы, границы, выравнивание или может быть он сформирован при помощи относительных единиц как em или проценты, полифил аккуратно сымитирует «прилепленное» позиционирование. Использование stickyfill также достаточно интуитивно-понятно.

Для начала скачайте stickyfill.js (если вы фанат jQuery, то убедитесь, что библиотека включает модуль для jQuery) Подключите библиотеки в вашем HTML документе. Дальше необходимо инициализировать stickyfill для выбранного элемента.

Если вы используете jQuery, то тогда напишите следующее:

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

Подводные камни

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

  • Первое, высота родительского контейнера должна быть больше высоты блока, который вы хотите «прилепить».
  • Хотя Safari изначально поддерживает «прилепленное» позиционирование (правда используя префикс), но он будет отображать его некорректно, если вы будете использовать тип отображения — таблица (display: table;) Это технический дефект.
  • Полифил также имеет свои недостатки. К примеру, он не будет работать с переполненным блоком.
  • На момент написания, полифил также не имеет в своём составе JavaScript обработчика события, когда «прилепленный» элемент застрял. Это может быть очень полезным. К примеру, он позволит добавить дополнительные классы к элементу в такой ситуации.

Подводя итог

«Прилепленное» позиционирование, реализованное через CSS, является прекрасным решением, когда вам нужно просто прикрепить элемент в заданном месте экрана. Если же вам нужно что-то больше — к примеру вы хотите добавить приятные спец эффекты к «прилепленному» элементы — вам лучше использовать JavaScript библиотеку, такую как Waypoints.js.

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

Проблемы с липким позиционированием

Я экспериментирую с липкой навигацией и столкнулся с проблемой. Проблема в том, что когда я помещаю навигацию в другой элемент, он больше не липкий.

html css css3 sticky

1 ответ

3 Решение Temani Afif [2020-10-25 23:45:00]

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

Добавьте границу, чтобы лучше увидеть проблему:

Теперь добавьте высоту к родительскому элементу и посмотрите, что происходит:

Липкое поведение работает нормально, потому что на родительском элементе достаточно высоты, чтобы элемент мог быть зафиксирован после определенного порога.

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

Добавить комментарий