Position sticky не работает flex

My position: sticky element isn’t sticky when using flexbox

I was stuck on this for a little bit and thought I’d share this position: sticky + flexbox gotcha:

My sticky div was working fine until I switched my view to a flex box container, and suddenly the div wasn’t sticky when it was wrapped in a flexbox parent.

7 Answers 7

Since flex box elements default to stretch , all the elements are the same height, which can’t be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

In my case, one of the parent containers had overflow-x: hidden; applied to it, which will break position: sticky functionality. You’ll need to remove that rule.

No parent element should have the above CSS rule applied to it. This condition applies to all parents up to (but not including) the ‘body’ element.

You can also try adding a child div to the flex item with the contents inside and assign position: sticky; top: 0; to that.

That worked for me for a two column layout where the contents of the first column needed to be sticky and the second column appear scrollable.

If you are using flex in the parent element use align-self: flex-start for the element which you want to make sticky.

For my situation, the align-self: flex-start (or justify-self: flex-start ) solution does not work. I need to keep overflow-x: hidden as well since some containers swipe horizontally.

My solution required nested display: flex with overflow-y: auto to get the desired behaviors:

• header can adjust height dynamically, which prevents playing with position: absolute or position: fixed
• content scrolls vertically, constrained horizontally to the view width
• sticky element can be anywhere vertically, sticking to the bottom of the header
• other elements can slide horizontally
  • looks like the SO snippet tool can’t render width on child elements to properly to demonstrate the horizontal slide, or maybe there’s some other setting on my actual layout that makes it work.
  • note that a wrapper element that does nothing else is required to allow overflow-x: auto to work correctly in elements under a parent with overflow-x: hidden

Источник

position:sticky is not working

I have this HTML code:

.header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position:sticky and top:0. But this didn’t work. I initially thought that firefox is not supporting position:sticky, but that’s not the case because I was able to see a working demo of it. I googled about it but found nothing helpful. Anyone knows why this is not working?

8 Answers 8

For anyone else that comes across this, position sticky was not working for me due to the body element having overflow-x: hidden; set.

It works fine if you move the navbar outside the header. See below. For the reason, according to MDN:

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left.

For the containing block:

The containing block is the ancestor to which the element is relatively positioned

So, when I do not misunderstand, the navbar is positioned at offset 0 within the header as soon as it is scrolled outside the viewport (which, clearly, means, you can’t see it anymore).

The 2 most common culprits why position: sticky; might not work are:

1. You haven’t defined top: 0; , bottom: 0; , left: 0 or something similar
2. One of the parents of your sticky element has overflow (x or y) set to hidden , scroll or auto .

For me it was the first one.

To expand from the answers above and some information to make it work with flexbox parent and overflow other than visible (the examples below assume you use vertical — sticky with either top or bottom set to a certain value and position set to sticky):

The most frequent case is you have an ancestor element (not just immediate parent) with overflow property set to something other than visible and as a result there is no space is left to stick around. To quickly find out if this is the case, you can run this script in the browser console (please make sure you change the .your-sticky-element class to your element’s selector):

SOLUTION:

a) If you found there is overflow set, and you can remove it, this should solve it

b) If you have to keep your overflow setting, you have to make the parent element’s height higher than the sticky element’s height. If the parent element has no height or the sticky element fills up all the height, it means there is simply no place to stick within when the page is scrolled. It doesn’t need to an explicit height (vertical), but you can inspect to see if your sticky element has extra space left after itself.

Parent is not higher than the sticky element to leave extra space. This particular case can be caused by different circumstances but the solution to this is the same above, please see 1.b

If your sticky element’s parent is a flexbox (align-items has default value of normal) and if the sticky element itself doesn’t have a proper align-self set, there will be no space left for the sticky element to hold when scrolling (for example, if it is align-self: stretch or auto [default value]). This is because the child element is stretched to fill up the height of the parent.

SOLUTION:

In this case, align-self: flex-start set for the sticky element can fix the problem because in the element will stand at the start, leaving extra space after itself.

Guide: There are much more complex circumstances both in the case of flexboxes and without it, but the general rule of thumb is your sticky element needs space within the parent to be sticky when scrolled.

Источник

«Position: sticky;» не работает CSS и HTML

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

13 ответов

Липкое позиционирование — это гибрид относительного и фиксированного позиционирования. Элемент обрабатывается как относительный, пока он не пересечет указанный порог, после чего он рассматривается как фиксированный.
.
Вы должны указать порог с по крайней мере одним из top , right , bottom или left для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования. [ источник: MDN ]

Таким образом, в вашем примере вам нужно определить позицию, в которой он должен вставляться в конце, используя top свойство.

Проверьте, установлен ли переполнение для элемента-предка (например, overflow:hidden ); попробуйте переключить это. Возможно, вам придется подняться на дерево DOM выше, чем вы ожидаете =).

Это может повлиять на вашу position:sticky на элемент-потомок.

У меня такая же проблема, и я нашел ответ здесь.

Если ваш элемент не прилипает, как ожидается, первое, что нужно проверить, это правила, применяемые к контейнеру.

В частности, найдите любое свойство переполнения, заданное родительским. Вы не можете использовать: overflow: hidden , overflow: scroll или overflow: auto на родительском элементе position: sticky элемент.

Еще несколько вещей, с которыми я столкнулся:

Когда ваш липкий элемент является компонентом (угловым и т.д.)

Если сам «липкий» элемент является компонентом с пользовательским селектором элементов, например угловым компонентом с именем вам необходимо добавить следующее к компоненту css:

В частности, для Safari на iOS, по-видимому, требуется display:block даже корневой элемент app-root углового приложения, иначе он не залипнет.

Если вы создаете компонент и определяете CSS внутри компонента (теневой DOM/инкапсулированные стили), убедитесь, что position: sticky применяется к «внешнему» селектору (например, app-menu-bar в devtools должен показывать sticky положение), а не div верхнего уровня внутри компонента. С помощью Angular этого можно достичь с помощью селектора :host в css для вашего компонента.

Другой

Если элемент, следующий за вашим липким элементом, имеет сплошной фон, вы должны добавить следующее, чтобы он не скользил внизу:

Ваш липкий элемент должен быть первым (перед вашим контентом), если используется top и после него, если используется bottom .

Существуют сложности при использовании overflow: hidden в вашем элементе-обертке — в общем, это убьет липкий элемент внутри. Лучше объяснил в этом вопросе

Мобильные браузеры могут отключать элементы с фиксированным/фиксированным расположением, когда отображается экранная клавиатура. Я не уверен в точных правилах (кто-нибудь когда-либо знает), но когда клавиатура видна, вы смотрите на своего рода «окно» в окно, и вы не сможете легко заставить вещи придерживаться фактическая видимая верхняя часть экрана.

Источник

Почему position: sticky в некоторых случаях не работает?

Почему position: sticky; не срабатывает? Заметил, что в некоторых случаях работает, а в некоторых нет, но не могу понять почему.

1 ответ 1

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержит containing block (ближайший предка уровня блока), включая элементы, связанные с таблицей, на основе значений top , right , bottom , и left . Смещение не влияет на положение любых других элементов.

Это значение всегда создает новый stacking context. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при overflow от hidden , scroll , auto , или overlay ), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.15.40479

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Моя позиция: липкий элемент не липкий при использовании flexbox

Я немного position: sticky зациклился на этом и подумал, что поделюсь вот этим + flexbox gotcha:

Мой липкий div работал нормально, пока я не переключил свое представление на контейнер flexbox, и внезапно div не стал липким, когда он был заключен в родительский элемент flexbox.

Поскольку элементы гибкого блока по умолчанию stretch равны, все элементы имеют одинаковую высоту, и их нельзя прокручивать.

Добавление align-self: flex-start к липкому элементу установило высоту авто, что позволяло прокрутку, и исправило это.

В настоящее время это поддерживается во всех основных браузерах, но Safari по-прежнему не использует -webkit- префикс, а в других браузерах, кроме Firefox, есть некоторые проблемы с position: sticky таблицами.

В моем случае overflow-x: hidden; к нему применился один из родительских контейнеров , что нарушит position: sticky функциональность. Вам нужно удалить это правило.

Ни к одному родительскому элементу не должно применяться указанное выше правило CSS. Это условие применяется ко всем родителям до (но не включая) элемента body.

Вы также можете попробовать добавить дочерний div к гибкому элементу с содержимым внутри и назначить position: sticky; top: 0; его.

Это сработало для меня для макета с двумя столбцами, где содержимое первого столбца должно быть липким, а второй столбец прокручивается.

Я сделал самодельную таблицу flexbox и столкнулся с этой проблемой. Чтобы решить эту проблему, я просто помещаю липкую строку заголовка за пределы флексбокса непосредственно перед ней.

Для моей ситуации решение align-self: flex-start (или justify-self: flex-start ) не работает. Мне тоже нужно сохранить, overflow-x: hidden так как некоторые контейнеры перемещаются по горизонтали.

Мое решение требовало вложенного display: flex с , overflow-y: auto чтобы получить желаемое поведение:

• заголовок может динамически регулировать высоту, что предотвращает игру с position: absolute или position: fixed
• контент прокручивается по вертикали, ограничиваясь по горизонтали шириной просмотра
• липкий элемент может быть где угодно по вертикали, прилипая к нижней части заголовка
• другие элементы могут скользить горизонтально
  • похоже, что инструмент SO snippet не может отображать width дочерние элементы, чтобы должным образом продемонстрировать горизонтальный слайд, или, может быть, в моем фактическом макете есть какие-то другие настройки, которые заставляют его работать .
  • обратите внимание, что элемент-оболочка, который больше ничего не делает, необходим overflow-x: auto для правильной работы в элементах под родительским элементом с overflow-x: hidden

Источник