css - 位置: sticky behavior on a child element whilst the parent is not sticky?

我正在尝试实现一些我不确定是否应该实现的目标。请注意，我正在寻找仅CSS的解决方案，我知道我可以使用JS解决此问题，但我不想这样做。

考虑以下笔:
https://codepen.io/fchristant/pen/PjoKOq

第二个导航栏(黑色)是粘性的，向下滚动时，它将停留在视口(viewport)的顶部。第一个导航栏(灯光)不是粘性的，它只会滚动开。

但是，该轻型导航栏具有一个是粘性的子元素。这样的想法是，父级将滚动走，而子级仍会粘住，并有效地与第二个导航栏(粘性)融为一体。

但是，这不起作用。因此，我的问题是:在父级中不具有粘性的子元素根本有可能存在吗？

HTML:

<div class="site_header">
  Site header
  <div class="site_header_child">
    sticky
  </div>
</div>
<div class="site_nav">
  Site header
</div>

CSS:

.site_header {
  display:flex;
  position:relative;
  width:100%;
  padding:10px;
  background:#eee;
}

.site_header_child {
  border:1px solid red;
  margin-left:auto;
  position:sticky;
  z-index:2;
  top:0;
  right:20px;
}

.site_nav {
  display: block;
  position:sticky;
  padding:10px;
  background:#333;
  color:#fff;
  position:sticky;
  z-index:1;
  top:0;
}

最佳答案

在这种情况下，不能使用粘性的。尽管可以通过其他方式达到相同的效果。您可以简单地使用“固定”定位，粘性 child 将保持原样。

.site_header_child {
  position:fixed;
  top:10px;
  background:#eee;
}

演示:https://codepen.io/anon/pen/VMWovv

关于css - 位置: sticky behavior on a child element whilst the parent is not sticky?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44342843/