css - 位置 :sticky does not leave parent

Question

如何使元素具有粘性，使其停留在视口(viewport)的顶部？我希望元素即使离开容器也能保持粘性。

我试过了

HTML

<div class="page">
  <div class="parent">
    <div class="child-sticky">
      <p>i want to be sticky, even when I'm outside my parent.</p>
    </div>
  </div>
</div>

CSS

.child-sticky {
  position:sticky;
  top:20px;
}

.page {
  height: 3000px;
}

这里有一支笔来说明问题。向下滚动以了解我的意思。

https://codepen.io/pwkip/pen/OxeMao

Answer 1

Sticky 以这种方式工作，它将相对于其父级保持 sticky。您需要使用 fixed。 Check this codepen