我将网站的基础设置为固定模板。主容器滚动，而其他所有内容都应保留在屏幕上。
模态是 100% css 控制的（如此处所示 https://www.labnol.org/code/20083-modal-popup-css）并且覆盖与主容器相同的区域
问题是，每当我打开一个模式时，屏幕焦点就会跳到它的中心，并且我所有其他静止的部分都会向上/向外移动，以被推出屏幕视图。如果我关闭模式，所有元素的新位置将保持不变，除非我重置整个页面。
这是为什么？
<style>
html, body {
overflow: hidden;
height: 100%;
width: 100%;
}
</style>
<body>
<header></header>
<nav></nav>
<main>
<sidebar>
<a href="">Modal1</a>
<a href="">Modal2</a>
<a href="">Modal3</a>
</sidebar>
<main-container>
<div id="initialContent"></div>
<div id="modal1"></div>
<div id="modal1"></div>
<div id="modal1"></div>
</main-container>
<main>
<footer></footer>
<body>