为什么在使用CSS中的position: sticky时，我的元素无法粘在左侧？

Question

我想在一个大的div垂直或水平滚动时，使用sticky定位将一个元素固定在屏幕的顶部和左侧。目前已经成功将元素固定在屏幕顶部，但无法将其固定在左侧。
以下是我的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位置不是呢？如何修复页面以获得所需的行为？

- Erik Vorstenbosch

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>

- Temani Afif

---

这个答案帮我检查了我的父元素。在我的情况下，父元素采用了display: flex和flex-direction: column，所以我必须使用align-self: end来将特定的子元素对齐到我想要的位置。谢谢。 - BrunoElo

Answer 2

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>

- Zohaib Tariq

---

@ZohaibTariq。感谢您检查我的代码。不幸的是，填充/边距修复并没有起到帮助作用。当水平滚动时，h1仍然会滚动出窗口。 - Erik Vorstenbosch

@ErikVorstenbosch 没关系。我不知道为什么它不工作，我已经尝试了相同的代码，对我来说可以运行。这是 gif。 - Zohaib Tariq