Элемент с position: sticky; фиксируется в рамках ближайшего родителя, когда расстояние до границы ближайшего прокручиваемого родителя достигает указанного в свойствах top , right , bottom , left значения. На то, в каком месте элемент прикрепится и где отцепиться, также влияют свойства padding , margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .
После того, как свойство position примет значение sticky , размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Прилипну, сделав отступ в -2em от верхнего края окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента на более чем на 2em, а нижний край элемента — выше нижнего края ближайшего родителя.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
Прилипну, сделав отступ в 2em от верхнего края окна браузера, когда верхний край окна браузера будет выше первоначального расположения верхнего края элемента не более чем на 2em, а нижний край элемента — ниже нижнего края ближайшего родителя не более чем на 2em.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Прилипну к верхнему краю окна браузера, когда верхний край окна браузера будет ниже первоначального расположения верхнего края элемента, а нижний край элемента — выше нижнего края ближайшего родителя на более чем 2em.
4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12
Прилипну к нижнему краю окна браузера, когда нижний край окна браузера будет ниже верхнего края ближайшего родителя, а нижний край элемента — выше своего первоначального расположения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
1 2 3 4 5 6 7
Прилипну то к нижнему краю окна браузера, то к верхнему
8 9 10 11 12 13 14 15
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Буду показан под зелёным блоком.
4 5 6 7 8 9
10 11 12 13 14 15
Как расположить HTML-картинки в одну строку с прикрепляющимся слева описанием
.raz < overflow: auto; border: 1px solid red; white-space: nowrap; /* не переносить на другую строку inline-элемент */ > .raz figure < display: inline-flex; margin: 0; >.raz figcaption < position: sticky; left: 0;/* для IE */ writing-mode: tb-rl; /* для Mozilla Firefox */ width: 1em; padding: 1em; line-height: 1; writing-mode: vertical-rl; /* перевернуть текст */ text-align: center; /* выравнять текст по середине */ background: rgba(255,255,255,.9); > .raz img
Поле ромашекОтражение котёнкаМедвежата у рекиВесёлый паровозикПланета Земля
Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?
Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.
Решение
«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).
Пример 1. Использование position
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фиксированное меню .menu < position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ >.text
Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.
Рис. 1. Положение блока с меню
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как растянуть фон на всю ширину окна?
Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как открыть ссылку в новом окне?
Как зафиксировать меню при прокрутке css
Чтобы зафиксировать меню при прокрутке страницы с помощью CSS, вы можете использовать свойство position и задать значение fixed для элемента меню.
Например, предположим, что у вас есть меню с классом menu и вы хотите зафиксировать его при прокрутке страницы. Вот пример CSS-кода, который можно использовать для достижения этой цели:
.menu position:fixed;top:0;left:0;width:100%;>
Здесь мы устанавливаем свойство position в значение fixed , чтобы зафиксировать меню на экране при прокрутке. Затем мы устанавливаем свойства top , left и width , чтобы разместить меню вверху страницы и растянуть его на всю ширину страницы.
как зафиксировать блок в блоке со скролом при прокрутке?
имеется блок div со скроллом. внутри него много текста и блок, который должен быть зафиксирован при скролле. как это сделать?
text
.
text
Были попытки дать fixed-block position: fixed , но он становится фиксированным относительно окна браузера. Были попытки дать fixed-block position: absolute , блок становиться поверх всего текста (как мне и надо), но но при скролле он тоже улетает. как быть?
Отслеживать
задан 28 ноя 2018 в 16:21
Ilya Nikulin Ilya Nikulin
101 1 1 серебряный знак 8 8 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы можете создать контейнер для скролла, и уже в нем располагать элементы абсолютно. Например, так:
Не поддавайтесь панике, даже если очень хочется. В самых разных уголках мира маглов вдруг начали появляться следы волшебства. Мы беспокоимся, что в скором времени это заметят даже крайне безразличные маглы. Волшебники и волшебницы, нам нужна ваша помощь!
Если не обуздать это бедствие, наступят страшные времена, как сами знаете когда при Сами-Знаете-Ком. Повторите знакомые вам заклинания, берите палочку и вступайте в наши ряды!