为什么不使用CSS位置：粘性？

Question

更直接的标题为：“ CSS位置粘滞不起作用”。

#style-guide {
    display: grid;
    grid-template-columns: 200px auto;
}

.nav-wrapper {
    position: sticky;
    top: 0;
}

<div>
    <div>
        <div>
            <div>
                <div id="style-guide">
                    <div class="nav-wrapper">
                        <nav id="style-guide-nav">
                            <div>this is the nav</div>
                            <div>this is the nav</div>
                            <div>this is the nav</div>
                        </nav>
                    </div>
                    <div style="height: 500vh;">
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                        content content content content content content content content content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

之所以如此嵌套代码，是因为我从生产代码中剥离了所有无关的类，样式，id，属性，兄弟姐妹等。

代码似乎不想对元素应用粘性定位。我以为是因为它嵌套在网格中，但是一个简单的测试证明并非如此（除非我在那里也做错了）。

有人可以指出我在做什么错吗？

Answer 1

只需将CSS声明移动到子元素。 nav-wrapper的高度与包含内容的div高度相同，因此它没有粘性的位置，但是它的子项可以粘在里面。

添加一些边框将使事情变得更清晰：

#style-guide {
  display: grid;
  grid-template-columns: 200px auto;
  border: 2px solid red;
}

#style-guide-nav {
  position: sticky;
  top: 0;
  border: 2px solid blue;
}

#style-guide>* {
  border: 2px solid green;
}

<div>
  <div>
    <div>
      <div>
        <div id="style-guide">
          <div class="nav-wrapper">
            <nav id="style-guide-nav">
              <div>this is the nav</div>
              <div>this is the nav</div>
              <div>this is the nav</div>
            </nav>
          </div>
          <div style="
    height: 500vh;
">
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
            content content content content content content content content content content content content content content content content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

默认alignment for grid items为stretch，这使.nav-wrapper元素成为网格的整个高度。因为您还没有滚动到.nav-wrapper元素的末尾，所以它的内容似乎不会“粘在”容器的顶部。

简单的解决方案是更改对齐方式，以使.nav-wrapper元素不会拉伸到全高：

#style-guide {
    display: grid;
    grid-template-columns: 200px auto;
}

.nav-wrapper {
    align-self: start; /* don't stretch */
    position: sticky;
    top: 0;
}

<div id="style-guide">
    <div class="nav-wrapper">
      <nav id="style-guide-nav">
        <div>this is the nav</div>
        <div>this is the nav</div>
        <div>this is the nav</div>
      </nav>
    </div>
  <div style="height: 500vh;">
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
    content content content content content content content content content
  </div>
</div>