我想在垂直或水平滚动大 div 时使用位置粘性将元素固定到屏幕的顶部和左侧。固定到顶部工作正常，但固定到左侧则不行。这是我的 html 页面：
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 0;
}
.scroll-horizontally-and-vertically {
width: 4000px;
height: 2000px;
background-color: lightblue;
}<div>
<div class="sticky">
<h1>please stick to top and left</h1>
</div>
<div class="scroll-horizontally-and-vertically"></div>
</div>我也尝试过使用 top 或 left ，结果相同。我肯定错过了什么。
为什么顶部位置固定，而不是左侧位置？我应该如何修复页面以获得所需的行为？