CSS粘性定位与嵌套元素

Question

据我所知，sticky position在离开框架之前会粘附在其容器上。

我的问题是我有一些嵌套的容器和一个内部的粘性元素，并希望它粘附在其祖父容器上。

有人可能建议将内部的粘性子元素冒泡，但问题是它必须保留在其父容器内，因为父容器是包含两个元素的 flexbox，而我希望其中一个元素保持粘性，同时允许另一个元素在溢出时滚动消失。

以下是一个示例html：

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

并且样式：

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
}

假设main-container是可滚动的，而inner-container正在其中滚动。

我知道CSS并没有提供明确的解决方案，问题是是否有任何技巧来处理它。

- Shay Yzhakov

---

我完全同意对于这个属性值缺乏文档说明。确切地说，让sticky生效需要满足哪些要求呢？将一个粘性元素放置在块级元素内似乎会导致它失效 (https://codepen.io/nathanch/pen/eXNwPV)，但是在MDN上并没有提到这种用法。 - png

Answer 1

不确定你想要做什么，但这个大概是你需要的吗？

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100px;
  height: 30px;
  justify-self: flex-start;
  background-color: green;
}

.non-sticky {
  background-color: blue;
  width: 100%;
  flex-grow: 5;
  flex-shrink: 5;
}

.main-container {
  height: 140px;
  overflow: scroll;
}

.inner-container {
  height: 300px;
}

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

- Steve Maris

---

不，你改变了我的 flexbox 的方向。 我想让它并排，但只有其中一个是粘性的。 - Shay Yzhakov

我已经更新了代码。如果它仍然没有接近您想要实现的内容，您能否更清楚地说明您想要的结果是什么。 - Steve Maris

我要解决的问题和你说的还不一样。我猜这个问题的解决方案并不是那么简单。 像我之前说过的，可滚动的 div 是“main-container”，所以“inner-container”是被上下滚动的那个。 在你的例子中，只有非粘性的子元素在滚动，而粘性子元素列的背景是静态的。 希望这次你能理解我的意思。我相信解决方案可能包括改变 HTML 结构或使用 JS 实现粘性定位，因为原生的粘性定位并不支持我需要的功能。 - Shay Yzhakov