Loading...

Позиционирование fixed и sticky

Course video 8 of 28

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное — от них зависит и система координат. На этой неделе вы познакомитесь со всеми типами и научитесь выбирать подходящий для ваших задач.

Тонкости верстки

Instituto de Física e Tecnologia de Moscou

Curso 3 de 5 no Разработка интерфейсов: вёрстка и JavaScript Programa de cursos integrados

Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.

Visualizar o programa do curso

Ministrado por

Олег Семичев
разработчик интерфейсов, Яндекс
Артем Кувалдин
разработчик интерфейсов, Яндекс
Мохов Олег
разработчик интерфейсов, Яндекс

Transcrição

Здравствуйте.

В предыдущих видео я рассказал вам о свойстве 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.

В следующем видео я расскажу вам о том,

по каким правилам происходит наложение элементов.

Sobre o Coursera

Cursos, especializações e graduações on-line, ministradas pelos melhores instrutores das melhores universidades e instituições de ensino.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play