覆盖列轮廓 - 滚动时固定
Overlay Column Outline - Fixed While Scrolling
我正在尝试实现类似于网站 d-esk.net 的功能，其中有一个视口 window 在您滚动时保持在原位，允许滚动的内容低于所述 window。该站点的内容保留在此 window 的边界内。解决此问题的最佳方法是什么？
我试着摆弄 [grid-col] { border: 1px solid black; } 和 [grid-row] { border: 1px solid black; } 但我没有任何运气。
我是 html 和 CSS 的初学者，因此非常感谢任何帮助，欢迎提供研究资源。
非常感谢！
框架有位置fixed:
html, body {
width: 100%;
}
body {
text-align: center;
}
.frame {
height: 80%;
width: 70%;
border: 1px solid black;
position: fixed;
top: 10%;
left: 15%;
}
.container {
width: 70%;
margin: 0 auto;
padding: 20px;
text-align: justify;
box-sizing: border-box;
}
<div class="frame"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
</div>
我正在尝试实现类似于网站 d-esk.net 的功能，其中有一个视口 window 在您滚动时保持在原位，允许滚动的内容低于所述 window。该站点的内容保留在此 window 的边界内。解决此问题的最佳方法是什么？
我试着摆弄 [grid-col] { border: 1px solid black; } 和 [grid-row] { border: 1px solid black; } 但我没有任何运气。
我是 html 和 CSS 的初学者，因此非常感谢任何帮助，欢迎提供研究资源。
非常感谢！
框架有位置fixed:
html, body {
width: 100%;
}
body {
text-align: center;
}
.frame {
height: 80%;
width: 70%;
border: 1px solid black;
position: fixed;
top: 10%;
left: 15%;
}
.container {
width: 70%;
margin: 0 auto;
padding: 20px;
text-align: justify;
box-sizing: border-box;
}
<div class="frame"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis augue a nibh accumsan aliquam. Suspendisse gravida leo arcu, sed interdum turpis venenatis eget. In mattis, magna ut congue pretium, turpis neque faucibus sapien, consectetur dapibus turpis erat in mi. Mauris vestibulum non felis eget pretium. Donec imperdiet dapibus fringilla. Sed congue euismod ultricies. Sed malesuada, enim sed lacinia vehicula, arcu elit tempor nulla, id hendrerit magna elit vel nibh. Sed suscipit mi id enim suscipit dictum id vel turpis. Nulla sapien neque, posuere sit amet egestas sed, ornare condimentum ipsum. Nulla molestie placerat quam, porttitor vestibulum ipsum vestibulum sed. Proin in porttitor mauris. Nunc a placerat felis. Vivamus laoreet viverra purus sed finibus. Nulla facilisi. Sed varius diam erat, eget pharetra orci laoreet vitae. </p>
<p>Cras dignissim elit et lacus pellentesque semper. Quisque in odio convallis, scelerisque turpis ac, gravida justo. Pellentesque nec ex tristique, pretium neque ut, iaculis orci. Phasellus velit tortor, ullamcorper ac massa id, euismod ultricies metus. Sed a ultricies mauris. Nulla facilisi. Maecenas posuere augue lacus, ut accumsan mi placerat a. Ut vel nibh sed nunc tincidunt feugiat. Sed auctor urna metus, luctus elementum ipsum condimentum vitae. Donec pretium viverra auctor. Quisque commodo finibus molestie. Nulla vel congue nisi, vel commodo ipsum. Aliquam vel dui non eros consectetur elementum non ut elit. Curabitur auctor ipsum a mi tincidunt, in commodo erat convallis. </p>
<p>Duis vestibulum est ut libero iaculis bibendum. In est turpis, iaculis eget venenatis in, convallis vitae turpis. Curabitur in urna sollicitudin, porttitor metus a, vulputate turpis. Praesent facilisis at risus id tempus. Suspendisse efficitur maximus ex, ut aliquet sem convallis ac. Phasellus mollis, metus at rutrum ullamcorper, massa nunc suscipit enim, quis sodales libero nibh varius leo. Mauris venenatis lorem diam, vitae scelerisque magna varius nec. Donec rutrum enim at mi laoreet, et vulputate mi lobortis. Phasellus ac dui at lacus tincidunt bibendum. Donec et metus sed lacus pellentesque fermentum non id sapien. Fusce vulputate, odio eu ullamcorper convallis, quam est dictum libero, a convallis metus orci a arcu. Cras pharetra ipsum dignissim odio elementum, sed pellentesque diam condimentum. Aenean et ligula lectus. </p>
</div>