如何让元素停留在粘性元素 css 下？

Question

我有一个容器，其中包含一些 header 和物品。我希望 header 是粘性的，并且项目总是在他下面。问题是项目总是与粘性元素重叠。我有演示代码

.container {
  width: 100%;
  height: 500px;
  background: yellow
}

.sticky {
  position: sticky;
  top: 0;
  height: 50px;
}

.item {
  margin-top: 20px
}

<div class="container">
  <div class="sticky">
    sticky el
  </div>

  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
</div>

Answer 1

粘性元素没有背景，所以它下面的项目仍然可见。如果它有背景，它会覆盖它们。

.container {
  width: 100%;
  height: 500px;
  background: yellow
}

.sticky {
  position: sticky;
  top: 0;
  height: 50px;
  background: #c00;
}

.item {
  margin-top: 20px
}

<div class="container">
  <div class="sticky">
    sticky el
  </div>

  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
  <div class="item">
    fdsfdsf
  </div>
</div>

Answer 2

.container {
  width: 100%;
  height: 800px;
  background: #ccc
}

.sticky {
  top: 0;
  height: 50px;
  background: #876;
  position: sticky;
}

.item {
  padding-top: 30px
}

<div class="container">
  <div class="sticky">
    sticky Header
  </div>

  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
  <div class="item">
    information
  </div>
</div>

如何让元素停留在粘性元素 css 下？

How to make elements to stay under a sticky element css?

html

css

sass