位置：子元素上的粘性行为，而父元素不粘性？

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

考虑下面的笔：https://codepen.io/fchristant/pen/PjoKOq https://codepen.io/fchristant/pen/PjoKOq

第二个导航栏（黑色）是粘性的，当您向下滚动时，它将粘在视口的顶部。第一个导航栏（浅色）不具有粘性，它只会滚动消失。

但是，该轻型导航栏有一个子元素is黏。这个想法是，父级将滚动离开，而子级会粘住，有效地与第二个导航栏（粘性的）混合。

然而，这不起作用。因此我的问题是：是否有可能在不粘性的父元素中存在粘性子元素？

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;
}

您可以尝试添加display: contents;给父级以使其充当父级。