Почему фиксированный блок перемещается при прокрутке?

Question

[HitGirl]

Здравствуйте!
Подскажите, пожалуйста, почему блок с классом mobileSidebar перемещается при прокрутке, хотя имеет фиксированное позиционирование? Как это можно исправить?
LiveDemo

Comments

[Вадим]

Это тролинг?

Потому что:

имеет фиксированное позиционирование

Видимо, стоит почитать Вам что такое posiiton: fixed перед тем как задавать вопросы и тратить чужое время.

[HitGirl]

Сделал так.

[Алексей]

Вадим, не понимаю, что по вашему в вопросе было не так?

Answer 1

[Алексей]

HitGirl объясню в чем проблема. Да, фиксированный элемент фиксируется относительно вьюпорта браузера и остается фиксированным при скролле, но в данном случае у вас у родителя (container) установлено свойство container-type: inline-size;
но при установке некоторых свойств они влияют на фиксированно спозиционированные элементы и те становятся позиционируемыми относительно родительского элемента, устанавливающего это свойство, т.е. в данном случае родителя (container) и больше не являются фиксированными относительно вьюпорта браузера.

Вот список всех таких свойств:
filter
transform
backdrop-filter
perspective
contain
container
transform-style
content-visibility

container и в частности container-type в принципе не стоит использовать пока, т.к. 76% всего глобальная поддержка.
В данном случае заменить fixed элемент на sticky самое простое, как вы и сделали. Альтернативный вариант через js получить ширину container и установить ее для mobileSidebar, если требуется иногда прям fixed оставить

Comments

[HitGirl]

А где вы нашли этот список свойств? В MDN только часть из них.

[Алексей]

На стэке у меня в закладках давно был пост как раз про это, там юзер список составлял. Ник Temani Afif, если надо найдешь, думаю.

[HitGirl]

Сохраню эту ссылку здесь.