Здравствуйте. В предыдущих видео я рассказал вам о свойстве position со значениями static, relative и absolute. В этом видео я расскажу вам об оставшихся двух. Это position: fixed и position: sticky. Итак, position: fixed. Он по сути является position: absolute элементом, но с одной особенностью. Он всегда позиционируется относительно вьюпорта, абсолютно во всех случаях. Например, у нас есть блок с классом wrapper, и внутри него вложен блок с классом fixed. Этому блоку мы задаем свойство position: fixed, вид 50% и отступы слева и сверху по 100 пикселей. В браузере это будет выглядеть вот так. То есть элемент позиционируется относительно вьюпорта, несмотря на то, что контента довольно много и появляется скролл. Следующее значение свойства position — значение sticky. В этом случае элемент отображается, как относительно спозиционированный до тех пор, пока не пересечет специальную границу, и тогда он начинает себя вести, как position: fixed элементы. Разберем пример. У нас есть набор слов, и мы группируем эти слова по первой букве. То есть у нас есть набор слов, начинающихся на букву A, и есть набор слов, начинающихся на букву B. И мы хотим при прокручивании, чтобы буква фиксировалась до тех пор, пока не закончится эта группа. Для этого задаем элементу dt свойство position: sticky. Смещение позволяет указать, насколько от верхней границы будет отступ. Итак, в браузере это выглядит вот так. То есть при прокручивании элемент прилипает к верхнему краю и как только он достигает нижней границы, он начинает вести себя, как position: relative элемент и уходит вместе со скроллом. Важно понимать, что это свойство очень новое, и поддержка браузера не очень хорошая, поэтому нужно десять раз задуматься, прежде чем использовать это свойство. В этом видео вы узнали про свойства position: fixed и position: sticky. В следующем видео я расскажу вам о том, по каким правилам происходит наложение элементов.
