html - 具有嵌套元素的 CSS 粘性位置

Question

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

我的问题是我有一些嵌套容器和其中的粘性元素，并希望它粘在它的祖 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>