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

Loading...

Do curso por Moscow Institute of Physics and Technology

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

50 classificações

Moscow Institute of Physics and Technology

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

50 classificações

Curso 3 de 5 em Specialization Разработка интерфейсов: вёрстка и JavaScript

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

Na lição

Модель отображения, часть 2

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

Относительная система позиционирования5:16

Абсолютная система позиционирования5:39

Позиционирование fixed и sticky2:07

Контекст наложения9:56

Плавающие элементы5:56

Блочный контекст форматирования2:38

Практические примеры4:46

Conheça os instrutores

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

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

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

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

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

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

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

© 2018 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play