为什么在 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，结果相同。我一定是漏掉了什么。

为什么顶部位置是固定的，而左侧位置不是？我应该如何修复页面以获得所需的行为？

Answer 1

Erit Vortstenbosch 欢迎来到社区。我已经检查了您的代码，它工作正常。只需将 h1 标记的边距和填充设置为 0。这是修改后的代码片段。

.sticky {
  position: -webkit-sticky; 
  position: sticky; 
  left: 0; 
  top: 0;
}

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

h1 {
  padding: 0;
  margin: 0;
}

<div>
  <div class="sticky">
  <h1>please stick to top and left</h1>
  </div>
  <div class="scroll-horizontally-and-vertically"></div>
</div>

Answer 2

粘性元素是另一个块级中的块级元素，因此如果它的父元素已经占据了 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% 约束）和父元素（因此它随浅蓝色元素一起增长），您将获得预期的结果

.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>

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

Why is my element not sticking to the left when using position sticky in css?

html

css

sticky