Мобильная версияВопрос: У меня возникла проблема с макетом, связанная с переполнением, фиксированными и прикрепленными элементами в мобильном режиме. Вот сценарий:
У меня есть контент, представленный в таблицах, и первая таблица должна иметь прикрепленный заголовок. Из-за этого требования я не могу поместить все таблицы в контейнер переполнения. Вместо этого я вложил элемент div, чтобы зафиксировать его положение, а дочерний элемент имеет параметр overflow-x: прокрутка.
Вот упрощенная структура:
[*]Заголовок (исправлен) [*]Div (прикрепляется при прокрутке), дочерний элемент (таблица с переполнением) T [*]Таблица с переполнением Таблица с переполнением
Этот макет работает так, как задумано, в режиме рабочего стола и до тех пор, пока я просматриваю его в адаптивном режиме в инструментах разработки браузера. Однако, когда я переключаюсь в «Режим эмуляции устройства (определенные модели)», что-то меняется в поведении элементов Position:fixed и Position:sticky, и это больше не работает должным образом.
В частности, элементы позиции: фиксированные теперь наследуют ширину родственных элементов с переполнением, а поведение позиции: закрепленное нарушено.
Я даже проверил это на реальном мобильном устройстве, и проблема не устранена.
Может ли кто-нибудь пролить свет на то, что здесь происходит, и, возможно, предложить альтернативные подходы к решению этой проблемы с макетом на мобильных устройствах? Мы будем очень признательны за ваши идеи.
Вот ссылка, чтобы вы могли убедиться в этом сами в режиме веб-разработки. https://sunny-souffle-948467.netlify.app/
не работает
работает, обратите внимание на комментарий/текст в заголовке "конец заголовка"
