CSS 嵌套元素的粘性位置

Question

据我所知，粘性位置在脱离框架之前会粘在它的容器上。

我的问题是我有一些嵌套的容器和其中的粘性元素，我希望它能很好地粘住parent。

有人可能会建议我将内部粘性 child 泡起来，但问题是它必须留在 parent 内部，因为 parent 是一个 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没有明确的解决方案，问题是有没有什么技巧可以解决。

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>

CSS 嵌套元素的粘性位置

CSS sticky position with nested elements

html

css

position

parent

sticky