我可以在父容器外使用 CSS `position:sticky` 吗？答案

【问题标题】：Can I use CSS `position:sticky` outside the parent container?我可以在父容器外使用 CSS `position:sticky` 吗？
【发布时间】：2017-10-30 09:43:51
【问题描述】：

我的降价看起来像 -

<body>
  <header>
   <div class"logo" />
   <div class"contact-info" />
   <div class="sticky-navigation"/>
  </header>
<main>
  <!-- content -->
</main>
</body>

当用户滚动浏览正文时，我需要使具有 sticky-navigation 类的 div 表现得像一个粘性导航。有没有办法使用position:sticky 来做同样的事情？

据我所见，position:sticky 的使用高度依赖于标记，并且仅适用于整个 <header/>。

【问题讨论】：

只是为了澄清，您是否希望它仅在滚动到某个位置后才粘贴？
@tjvg1991 我希望它一碰到视口的顶部就粘住。
试试这个teamtreehouse.com/community/…

标签： html css css-position sticky

【解决方案1】：

position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */

如果你只使用 css - 你可以使用 position:fixed

【讨论】：

粘性行为与固定位置不同。
是的，但是请检查 caniuse - 你会看到它也依赖于浏览器，并非所有浏览器都支持它，你需要在 css 中添加浏览器规范
我正在添加一个 polyfill 以支持浏览器。这不是问题。