чистый CSS несколько стеков позиции липкий?

Question

Возможно ли иметь несколько прикрепленных элементов друг над другом в чистом CSS?

Желаемое поведение можно увидеть здесь: https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Только я бы предпочелиспользуйте чистый CSS вместо реализации Javascript.Я немного поэкспериментировал с несколькими липкими элементами, но не могу удержать их от выталкивания других липких элементов.Я пытался поместить их в один и тот же контекст стека:

#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}

Но не могу заставить его работать, как вы можете видеть ниже.Любая идея будет принята с благодарностью!

#container
{
  display: grid;
  grid-template-columns: 50% 50%;
}
#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}
#fixed
{
  position: relative;
}
#fixed .sticky-1
{
  position: fixed;
  top: 0;
}
#fixed .sticky-2
{
  position: fixed;
  top: 1em;
}

<div id="container">
<article id="sticky">
  <header>
  
  </header>
  <main><h1 class="sticky-1">Sticky heading</h1>
  <p>here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. </p>
    </main>
    <section>
  <h2 class="sticky-2">Both headings should stick at the same time.</h2>
  <p> And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. </p>
      </section>
</article>
  <article id="fixed">
  <header>
  
  </header>
  <main><h1 class="sticky-1">Fixed heading</h1>
  <p>Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. oes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. </p>
    </main>
    <section>
  <h2 class="sticky-2">Another fixed to show how they should stick.</h2>
  <p>And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. </p>
      </section>
</article>
</div>

Answer 1

Все, что вам нужно сделать, это вложить элементы с position:sticky друг в друга.А затем постепенно установите top:2em для последующих липких заголовков.Ваше перо содержало две колонки, поэтому я предположил, что вам нужны две прокрутки, отсюда и фрагмент кода.

body {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #222;
}

.mainParent {
  height: 90%;
  width: 80%;
  background: rgba(222, 222, 222, 0.10);
  color: #ddd;
  overflow-y: scroll;
  border: 4px solid #ddd;
}

.mainParent {
  margin: 0.5em
}

.header {
  position: sticky;
  padding: 0.5em;
  background: #ddd;
  color: #222;
  text-align: center;
}

#header01 {
  top: 0;
}

#header02 {
  top: 2em;
}

#header03 {
  top: 4em;
}

#header04 {
  top: 6em;
}

#header05 {
  top: 8em;
}

.content {
  text-align: center
}

<div class="mainParent">
  <div class="header" id="header01">Header 01</div>
  <div id="content01" class="content">
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>Content 1-1<br><br>
    <div class="header" id="header02">Header 02</div>
    <div id="content02" class="content">
      <br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br>Content 1-2<br><br>
      <div class="header" id="header03">Header 03</div>
      <div id="content03" class="content">
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>Content 1-3<br><br>
        <div class="header" id="header04">Header 04</div>
        <div id="content04" class="content">
          <br><br><br><br><br><br><br><br><br><br><br><br>
          <br><br><br><br><br><br><br><br><br>Content 1-4<br><br>
          <div class="header" id="header05">Header 05</div>
          <div id="content05" class="content">
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br>Peace &#128406;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="mainParent">
  <div class="header" id="header01">Header 01</div>
  <div id="content01" class="content">
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br>Content 2-1<br><br>
    <div class="header" id="header02">Header 02</div>
    <div id="content02" class="content">
      <br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br>Content 2-2<br><br>
      <div class="header" id="header03">Header 03</div>
      <div id="content03" class="content">
        <br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>Content 2-3<br><br>
        <div class="header" id="header04">Header 04</div>
        <div id="content04" class="content">
          <br><br><br><br><br><br><br><br><br><br><br><br>
          <br><br><br><br><br><br><br><br><br>Content 2-4<br><br>
          <div class="header" id="header05">Header 05</div>
          <div id="content05" class="content">
              <br><br><br><br><br><br><br><br><br><br><br><br>
              <br><br><br><br><br><br><br><br><br>Peace &#128406;
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Вы можете найти этот код в виде ручки здесь .

Я надеюсь, что этот ответ поможет вам.

Мир 101

Answer 2

Вам нужно сделать так, чтобы все элементы прилипали к одному и тому же контейнеру (содержащему блок) , добавив несколько смещений.

Вот базовый пример, где элементы будут прилипать к телу:

body {
  margin:0;
  min-height:200vh;
  border:2px solid;
}
.first {
  height:50px;
  background:red;
  position:sticky;
  top:0;
}

.second {
  height:50px;
  background:blue;
  position:sticky;
  top:52px;
}
.third {
  height:50px;
  background:green;
  position:sticky;
  top:104px;
}

<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

Не будет работать, если они находятся в разных контейнерах:

body {
  margin: 0;
  min-height: 300vh;
}
body > div {
  border:2px solid;
}

.first {
  height: 50px;
  background: red;
  position: sticky;
  top: 0;
}

.second {
  height: 50px;
  background: blue;
  position: sticky;
  top: 52px;
}

.third {
  height: 50px;
  background: green;
  position: sticky;
  top: 104px;
}

<div>
  <div class="first"></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div>
  <div class="second"></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div>
  <div class="third"></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

Элемент с фиксированным позиционированием - это элемент, вычисленное значение позиции которого является фиксированным.Он обрабатывается как относительно позиционированный, пока его содержащий блок не пересекает указанный порог (например, задает для top значение, отличное от auto) в пределах своего корневого потока (или контейнера, в котором он прокручивается), и в этот момент он рассматривается как «застрявший» до встречи с противоположным краем содержащего его блока ^ref

Самая важная часть здесь - последняя.Поэтому, если все элементы не находятся в одном и том же контейнере, каждый из них достигнет края своего контейнера, и поведение закрепления на этом остановится.Обратите внимание, что в последнем примере каждый элемент перестанет двигаться при достижении bottom-border содержащего его блока

---

. Если вы хотите обработать динамическую высоту, вы можете рассмотреть это решение: КакМогу ли я правильно отразить различные уровни заголовков с помощью позиции: sticky?

---

Еще один связанный вопрос, чтобы получить больше примеров: css sticky - не прилипает к нижней части родителя