如何定位用户位置：css中的粘性[重复]答案

【问题标题】：how to user position: sticky in css [duplicate]如何定位用户位置：css中的粘性[重复]
【发布时间】：2021-06-10 19:41:40
【问题描述】：

我的网站中有一个 div，里面还有另一个 div，我给了内部 div 位置 sticky 和 top:0 但它不起作用！这是我的代码示例：

Above : 容器是一个普通的 div 和内部 div 有一个粘性位置和顶部：0 但它不起作用。任何解决此问题的建议！

.sticky-div{
      background: #fed700;
      position: sticky;
      top: 0;
    }

    <div class="container">
      <nav>
        <li>item1</li>
        <li>item1</li>
      </nav>
      <div class="sticky-div">
        Sticky
      </div>
    </div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>

【问题讨论】：

请用html和css分享你的源代码
@GeorgeMa 在这里，但请注意，我希望内部 div 粘性而不是父级
这能回答你的问题吗？ Position: sticky behavior on a child element whilst the parent is not sticky?
元素在其容器内滚动时会保持粘性。现在你的粘性元素不会“粘”，因为它的容器没有滚动，它可能是滚动的主体。
@Rojo 不，我有同样的问题，但没有解决方案

标签： html css sticky-session

【解决方案1】：

您只需要删除周围的容器 div 或使该 div 具有粘性。

【讨论】：

好的朋友，但在我的情况下，粘性 div 位于页面中间而不是顶部

【解决方案2】：

根据用户的滚动位置定位。但所有内容必须在同一个容器中，您可以将文本放在容器内，也可以将粘性元素移出容器

.sticky-div{
  background: #fed700;
  position: sticky;
  top: 0;
}

<div class="container">
  <div class="sticky-div">
    Sticky
  </div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

【讨论】：

【解决方案3】：

我相信只有当它所在的容器上有粘贴位置时，粘性定位才会起作用。

如果你想让它工作，它应该怎么做：

* {
  padding: 0;
  margin: 0;
}

.sticky-div,
.stickyContainer {
  background: #fed700;
}

.stickyContainer {
  position: sticky;
}

<div class="sticky-div">
  Sticky
</div>
<p>text</p>
<p>text</p>

<div class="stickyContainer">
  Sticky
</div>
<p>text</p>
<p>text</p>

【讨论】：

好的朋友，但在我的情况下，粘性 div 位于页面中间而不是顶部