Всем привет! Недавно занимаясь веб-серфингом в поисках новой темы наткнулся на статью о липком позиционировании в css и это стало лично для меня открытием. Сама тема конечно не нова, но думаю найдутся подобные мне индивиды которые слышат об этом впервые. Поехали!

Мы все знаем что позиционирование в css начинается после определения свойства position которое может принимать следующие значения:

1. static
2. relative
3. absolute
4. position
5. sticky

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

Рассмотрим пример работы с данным типом позиционирования.

<style>
  nav {
    position: sticky;
    top: 10px;
  }
</style>
<div style="height:2000px;">
  <h1>Какой то заголовок</h1>
  <p>7xxxxxxxxxx</p>
  <nav>
    <a>Главная</a>
    <a>О нас</a>
    <a>Контакты</a>
  </nav>
</div>

В данном примере создан блок div высотой в 2000px для возможности скрола. В нем расположен заголовок, какой то текст и условно навигационное меню. Так вот к навигационному меню и применяется липкое позиционирование через 'position: sticky;'. Не забывайте что при любом позиционировании должно быть указано хотя бы одно из свойств (top, bottom, right, left) иначе работать ничего не будет.

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

Липкое позиционирование sticky чем то похоже на фиксированное fixed. Отличие заключается лишь в том что при липком позиционировании элемент фиксируется в указанную позицию только в момент его скрытия во время проскроливания. При фиксированном позиционировании элемент сразу помещается в указанную позицию.

Еще было выявлено то что при sticky - позиционировании не поддерживаются свойства (left, right), то есть нет возможно позиционировать элемент по горизонтали. В этой ситуации элемент можно зафиксировать только по вертикали через свойства(top, bottom) относительно верха или низа страницы.

Еще один пример.

<style>
  nav {
    position: sticky;
    top: 10px;

  }
 p{
	
   position: sticky;
   bottom: 10px;
}
</style>
<div style="height:2000px; ">
  <h1>Какой то заголовок</h1>
  <p>7xxxxxxxxxx</p>
  <nav>
    <a>Главная</a>
    <a>О нас</a>
    <a>Контакты</a>
  </nav>

</div>
<p>Адрес компании</p>
<footer>
    <p>2020 копирайт</p>
</footer>

Здесь добавили фиксирование снизу. Обратите внимание что задали sticky значение для всех тегов p, а оно было применено только для:

<p>Адрес компании</p>

Видимо необходимо соблюдать еще определенную иерархию тегов чтобы все хорошо работало.

На этом данная статья подошла к концу. Сегодня рассмотрели как работать с липким позиционированием в css и узнали об его интересных особенностях.

Не забудьте подписаться в группу Вконтакте для получения уведомлений о новых статьях и разработках. Для дополнительной информации есть канал на youtube.

С вами был Грибин Андрей, всего вам хорошего!