粘滞位置无法按预期工作。作为越野车工作

Question

我正尝试在我的 header 零件上使用摇杆位置。在滚动上，它与几个侧向移动一起工作。然后 header 隐藏。根据我的要求，它应该始终位于顶部。我也给了 z-index 更高的价值。任何人都可以帮助我理解这个问题。

HTML:

 <div class="wrapper">
  <div class="navi">Navigation</div>
  <header>Header goes here</header>
  <div class="container">
    <div class="child1">Chile-1</div>
    <div class="child2">Chile-2</div>
    <div class="child3">Chile-3</div>
    <div class="child4">Chile-4</div>
    <div class="child4">Chile-5</div>
    <div class="child4">Chile-6</div>
    <div class="child4">Chile-7</div>
  </div>
</div>

css:

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100%;
  position: relative;
}

.container {
  border: 2px solid blue;
  height: 100%;
}

.navi {
  border: 2rem solid lightpink;
}

header {
  background-color: gray;
  padding: 1rem;
  top: 0;
  left: 0;
  right: 0;
  position: sticky;
  z-index: 100;
}

.container > div {
  height: 50%;
  border: 1px solid red;
}

.child1 {
  background-color: brown;
}

.child2 {
  background-color: yellow;
}

.child3 {
  background-color: lightblue;
}

.child4 {
  background-color: greenyellow;
}

Live demno

Answer 1

将 100% 高度添加到 .wrapper 和 .container 时，高度计算如下图（在我的例子中为 838px）..当滚动超过 838px 时，header松开 sticky 属性.. 当您设置为 auto 时，高度将自动计算（添加所有 div 的高度）并且它按预期工作..

高度为 100%

自动高度

Answer 2

 html,
    body {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      position: relative;
    }

    .navi {
      border: 2rem solid lightpink;
    }

    header {
      top: 0;
      padding: 1rem;
      z-index: 100;
      position: sticky;
      background-color: gray;
    }

    .container>div {
      padding: 30px;
      position: relative;
      z-index: 0;
    }

    .child1 {
      background-color: brown;
    }

    .child2 {
      background-color: yellow;
    }

    .child3 {
      background-color: lightblue;
    }

    .child4 {
      background-color: greenyellow;
    }

<div class="wrapper">
    <div class="navi">Navigation</div>
    <header>Header goes here</header>
    <div class="container">
      <div class="child1">Chile-1</div>
      <div class="child2">Chile-2</div>
      <div class="child3">Chile-3</div>
      <div class="child4">Chile-4</div>
      <div class="child4">Chile-5</div>
      <div class="child4">Chile-6</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
      <div class="child4">Chile-7</div>
    </div>
  </div>

粘滞位置无法按预期工作。作为越野车工作

Sticky position not works as expected. works as buggy

html

css

sticky