Блоки отображаются поверх полосы прокрутки страницы
знатоки. Столкнулся с такой проблемой: блоки div отображаются поверх полосы прокрутки страницы, когда у них стоит position: fixed. Например: шапка сайта. Но z-index тут не причем, я проверял.
Так же width: 100% при position: fixed работает как width: 100vw.
Такое отображение усложняет работу и портит вид сайта. Что делать?
Ответы (1 шт):
вариант 1:
высоту блока
mainвыставить точноheight: calc(100vh - 9vh);
хотя высоту плашки header делать через относительную высоту как-то не очень - могут полезть артефакты
блоку
mainдобавить свойствоoverflow: auto;
в результате прокрутка будет не у всего body, а только у блока main
вариант 2:
сделать header липким:
https://www.w3schools.com/howto/howto_js_sticky_header.asp
P.S.
вообще перекрытие прокруток - это особенность браузеров
в мобильном браузере прокрутка видна на fixed блоке