如何修复：粘性位置表现得像固定？答案

【问题标题】：How to fix: sticky position behaving like fixed?如何修复：粘性位置表现得像固定？
【发布时间】：2019-06-27 03:45:41
【问题描述】：

我正在为一个可能的客户制作一个示例网站，我之前已经让它工作但无法复制它。基本上，我有标题 div，它是蓝色框，我有标题/菜单栏，它应该就在它的正下方。最后，我有一个类似于标题下方网站其余部分的大图像。我希望菜单栏/标题（当网站加载时）开始位于标题 div 的正下方。当您向下滚动浏览网站时，它会向上移动直到到达网站顶部，然后它作为一个固定位置工作，最好我想使用 CSS position: sticky; 来完成此操作

我在以下 CSS 脚本中的内容似乎使标题充当固定位置而不是其他任何东西。即使我使用top: 90px; 来抵消它，我也尝试过在整个页面周围放置一个 div，除了标题并将标题放在里面用作一种容器，但没有奏效。我试过根本不使用包含 div。纳达...

CSS：

#sticky {
position: sticky;
background: orange;
top:90px;
z-index: 50;
width: 100%;
height:50px;
}

HTML：

    <body>
    <div id="title">
    </div>
    <div id="sticky">
    <ul id="ulHeader">
    <li>Home</li>
    <li>Menu</li>
    <li>Find Us</li>
    <li>Contact Us</li>
    </ul>
    </div>

    <div id="image">
    <img src="images/tacos.jpeg">
    </div>

我没有收到任何错误消息，我希望使用此代码，标题/菜单栏从页面顶部开始 90px 并且当您滚动时它会卡在顶部滚动足够远。不幸的是，最终发生的事情是标题只是像固定元素一样始终从顶部保持90px。

【问题讨论】：

标签： html css

【解决方案1】：

将顶部更新为 0px，使其贴在页面顶部

#sticky {
position: sticky;
background: orange;
top:0px;
z-index: 50;
width: 100%;
height:50px;
}

你也可以看看这个example

【讨论】：

我尝试了您的建议，但没有成功，基本上只是移动到顶部并表现得像一个固定元素，我最终将您的代码复制到需要替换的地方并且它有效！我不明白为什么，你能帮我理解以下内容吗？：标题栏实际上如何知道从标题下方开始以及如何在未来情况下将粘性元素/ div 定位在我想要的位置？感谢您的回答，我想更好地理解以帮助我将来能够使用它。
标题栏在标题下方，因为标题div写在标题div之后。至于粘性元素的定位，top，left，right和bottom属性用于定义您想要粘性元素的位置坚持下去。如果您需要代码方面的帮助，请在 codepen 上分享您的整个代码。