位置：粘性不起作用

Question

我有这个 HTML 代码：

 <div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header 的高度为 150 像素。 .navbar 的高度为 20px。当用户滚动时，我希望 .navbar 贴在顶部。所以我去 CSS 并设置 position:sticky 和 top:0。但这没有用。我最初认为 firefox 不支持 position:sticky，但事实并非如此，因为我能够看到它的工作演示。我用谷歌搜索了它，但没有发现任何帮助。任何人都知道为什么这不起作用？

原文由 Wolfuryo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您将导航栏移到标题之外，它可以正常工作。见下文。出于这个原因，根据 MDN ：

元素根据文档的正常流进行定位，然后根据 top、right、bottom 和 left 的值相对于其流根和 包含块 进行 偏移。

对于 _包含块_：

包含块是元素相对定位的祖先

因此，当我没有误解时，导航栏一旦滚动到视口之外，就会定位在标题内的偏移量 0 处（这显然意味着您再也看不到它了）。

 .navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}

 <div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>

<div class="navbar"></div>

原文由 SVSchmidt 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

由于 body 元素具有 overflow-x: hidden; 集，位置粘性对我不起作用。

原文由 nickspiel 发布，翻译遵循 CC BY-SA 4.0 许可协议