一个元素的position设置为sticky时，其父元素没有设置sticky属性，该元素的行为如何？

Question

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

考虑以下代码片段：https://codepen.io/fchristant/pen/PjoKOq

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

然而，那个浅色导航栏有一个粘性的子元素。其想法是父级将滚动消失，但子元素仍然保持粘性，有效地与第二个导航栏（粘性的）融合。

然而，这并不起作用。因此，我的问题是：是否有可能在非粘性父元素内拥有一个粘性子元素？

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

- Fer

Answer 1

你可以尝试在父级元素中添加 display: contents;，使其像父元素一样运作。

- Johnny

Answer 2

在这种情况下无法使用sticky。但可以通过其他方法实现相同的效果。您可以使用“fixed”定位，这样粘性子元素将会保持原位置不动。

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

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

- adrian.krzysztofek

---

为了使用粘性选项，只有在粘性父元素内部使用粘性子元素才能起作用。但这会产生副作用... - TheodorosPloumis

Answer 3

尝试一下： - > 用 top: 10px 替换 top: 0

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

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

- Milos Tanaskovic

Answer 4

.site_header_child 只会在其父元素的高度范围内保持粘性。

如果您想让 .site_header_child 元素出现在第二个栏中，您需要给它一个固定的位置。

- jfudman