一个position:absolute元素可以被设置为sticky吗？

Question

在CSS中，position: sticky使一个元素以position: static的方式显示（即，它采用文档流中的默认位置），直到它到达某个滚动位置，此后它就采用了position: fixed的行为。

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

---

上下文： 我有一个占据视口左上角位置的离开流元素。在滚动一英寸或两英寸后，该元素触及视口顶部，并且理想情况下，我希望它不会在那一点继续消失。

- Rounin - Standing with Ukraine

---

不幸的是，它只支持相对定位。此外，请注意position: sticky当前在Internet Explorer中没有支持，而其他浏览器的支持也不稳定。我个人建议避免使用它。 - Obsidian Age

请注意，CSS 中 position 属性的默认值为 static 而非 relative。 - GibboK

是的，当然可以。问题已更新以确认此事。 - Rounin

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>

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

粘性元素在其父元素中保持粘性，因此在其单元格之外滚动时仍会保持。

- Quentin D

---

这完全没有回答问题，因为 sticky div 没有在容器中绝对定位（超出流程）。 - Inigo

Answer 2

正如GibboK所说， 默认的定位方案不是绝对定位，而是静态位置。默认情况下，元素以正常流方式布局——如果超出流程是默认值，则默认HTML页面将无法阅读。此外，绝对定位的元素大多数情况下会随着页面滚动而滚动——唯一可以使绝对定位的元素在页面滚动时像固定定位的元素一样行为的时间是通过一些半复杂的CSS。

如果您想知道是否可能

• 当粘性定位时被粘住和松开时，一个固定定位的元素处于流程之外，或者
• 对于一个粘性定位元素的包含块与绝对定位元素的确定方式相同，

那么不幸的是，这两个都不受粘性定位的支持。

- BoltClock

---

是的，我表达问题不太清楚。我有一个超出流程的元素，它占据了视口左上角附近的位置。在滚动了一英寸或两英寸后，该元素会触及视口顶部，并且理想情况下，我希望它不要在那一点继续消失。 - Rounin

Answer 3

“position:sticky”的意义在于，只有在父元素不可见时才是“fixed”。而“position:absolute”的元素则不会与其父级元素关联。

如果存在这样的“position”，并且规则是当绝对定位的元素可见时，该元素将是“absolute”，那么这将非常有趣。但目前原生不存在这样的情况，但您可以尝试使用JS重新创建它。

- Sebastian Speitel

Answer 4

让粘性元素看起来像是绝对定位的方法

我想出了这个技巧，可以实现这个目标，但我还没有想出如何修复它的一个缺陷：滚动内容底部有一个空白区域，该区域的高度等于粘性元素的高度加上其初始垂直偏移量。

请查看代码中的注释以了解其工作原理。

#body {
  width: 100%;
  position: relative;
  background: Linen;
  font-family: sans-serif;
  font-size: 40px;
}

/* to position your sticky element vertically, use the
   height of this empty/invisible block element */
#sticky-y-offset {
  z-index: 0;
  height: 100px;
}

/* to position your sticky element horizontally, use the
   width of this empty/invisible inline-block element */
#sticky-x-offset {
  z-index: 0;
  width: 100px;
  display: inline-block;
}

/* this element is sticky so must have a static position,
   but we can fake an absolute position relative to the
   upper left of its container by resizing the invisible
   blocks above and to the left of it. */
#sticky-item {
  width: 150px;
  height: 100px;
  border-radius: 10px;
  background-color: rgba(0, 0, 255, 0.3);
  display: inline-block;
  position: sticky;
  top: -80px;
  bottom: -80px;
}

/* this div will contain the non-sticky main content of
   the container. We translate it vertically upward by
   sticky-y-offset's height + sticky-item's height */
#not-sticky {
  width: 100%;
  background-color: rgba(0, 0, 255, 0.1);
  transform: translateY(-200px);
}

.in-flow {
  width: 90%;
  height: 150px;
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px 10px;
  background: green;
  opacity: 30%;
}

<div id="body">
  <div id="sticky-y-offset"></div>
  <div id="sticky-x-offset"></div>
  <div id="sticky-item">absolute &amp; sticky</div>

  <div id="not-sticky">
    <div class="in-flow">in flow</div>
    <div class="in-flow">in flow</div>
    <div class="in-flow">in flow</div>
    <div class="in-flow">in flow</div>
  </div>
</div>

- Inigo