可以将position:absolute元素设为粘性吗？

Question

在 CSS 中，position: sticky使元素能够以某种position: static行为进行显示（即，它采用其在文档流中的默认位置），直到它到达某个滚动位置，然后采用某种position: fixed行为。

position: sticky那么...这是否意味着我们不能在需要正常行为的元素上使用position: absolute？

---

语境：

我有一个流出元素，它占据了视口左上角的位置。滚动一两英寸后，元素会到达视口的顶部，理想情况下，我希望它不会在此时继续消失。

Answer 1

实际上，您可以利用display: grid并拥有一个不会推动其同级元素的粘性元素：

header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  border: 1px dashed #f00;
}

main {
  display: grid;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section {
  grid-column: 1;
  height: 100vh;
  border: 1px dashed #0f0;
}

.first.section {
  grid-row: 1;
}

.sticky {
  grid-row: 1;
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 30vh;
  border: 1px dashed #0ff;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border: 1px dashed #f00;
}

<header>I'm the header</header>
<main>
  <div class="sticky">I'm sticky</div>
  <div class="first section">Just</div>
  <div class="section">some</div>
  <div class="section">sections</div>
</main>
<footer>I'm the footer</footer>

这里的技巧是放置粘性部分并第一个兄弟放置在其父级的第一行和第一列上（因为网格允许我们将许多元素放置在同一个单元格中）。

粘性元素在其父元素中保持粘性，因此它将保持滚动超出其单元格。

Answer 2

要点position:sticky是只有fixed当父元素不在视图中时才有效。元素position:absolute不附加到其父元素。

position如果存在这样的元素，并且规则是absolute，而它绝对定位的元素在视图中，那么这可能会很有趣，但目前不存在像这样的 nativley，但您可以尝试使用 JS 重新创建它。