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

Question

我正在努力实现一些我不确定是否可能实现的事情。请注意，我正在寻找纯 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;
}

Answer 1

在这种情况下无法使用粘性。但是，可以通过其他方式实现相同的效果。您可以简单地使用“固定”定位，粘性 child 将保持原样。

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

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