Почему не работает sticky?

Question

[Егор Антропов]

У сайдбара в флексбоксе указал position: sticky . У этого же сайдбара align-self: flex-start



https://codepen.io/therelow/pen/NWKexmP

Answer 1

[Рома Зварич]

Не знаю почему, но методом исключения заметил, что это свойство не работает из-за наличия следующего правила

html, body {
    overflow-x: hidden;
}

P.S. Если задать его не обоим тегам сразу (HTML и body), а только одному (например, только body), то блок с position:sticky работает корректно


Результат, если это правило закомментировать (всё работает)
https://codepen.io/hisbvdis/pen/BaBvKaa

Comments

[chelnokov_a]

нафига вообще для body задавать такое свойство?

[Андрей Зырянов]

Мда, очень странная зависимость.

Answer 2

[Олег]

Нужно сделать чтобы сайдбар был во всю высоту (убрать align-self: flex-start) и добавить внутрь еще один див (например .filters) и перенести стили:

.filters {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 0 21px 25px;
	box-shadow: 0 0 30px #f1f1f1;
	background-color: #ffffff;
}

<div class="sidebar">
	<div class="filters">...</div>
</div>

Comments

[Рома Зварич]

Олег , попытался сделать так, как Вы написали.
Вот результат: https://codepen.io/hisbvdis/pen/qBWLZXQ
К сожалению, эффект не сработал
Вы не могли бы уточнить, это я что-то сделал не так?
Если не трудно, не могли бы показать на приведенном примере работающий вариант?

[Олег]

Рома Зварич, Вы все верно написали, нужно еще поправить CSS у html тега, иначе не заработает, я мельком глянул и не обратил на это внимания.

Answer 3

[romanown]

так же если у родителя флекс display: flex или (и) у одного из родителей overflow: hidden. у меня было сразу оба параметра.