html - 为什么在 css 中使用 position sticky 时我的元素没有粘在左边？

Question

我想在垂直或水平滚动大 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，结果相同。我一定是遗漏了什么。

为什么top位置是固定的，left位置不是？我应该如何修复页面以获得所需的行为？

Answer 1

粘性元素是另一个 block 级中的 block 级元素，因此如果它的父元素已经占据了 100% 的宽度，并且没有留给左粘性行为的空间。

添加一些边框以更好地查看:

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}

<div style="border:2px solid red;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>

绿色盒子只能卡在红色盒子里面，浅蓝色元素溢出。将 inline-block 添加到粘性元素(以移除宽度 100% 约束)和父元素(因此它随 lightblue 元素一起增长)，您将获得预期的结果

.sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
  border:2px solid green;
  display:inline-block
}

.scroll-horizontally-and-vertically {
  width: 4000px;
  height: 2000px;
  background-color: lightblue;
}

<div style="border:2px solid red;display:inline-block;">
  <div class="sticky">
    <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>