为什么在css中使用位置粘性时我的元素不粘在左边？

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

粘性元素是另一个块级内的块级元素，因此如果它的父元素已经占用了 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>

Answer 2

Erit Vortstenbosch 欢迎加入社区。我已经检查了您的代码，它工作正常。 只需将 h1 标签的边距和内边距设置为 0。 这是修改后的代码sn-p。

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