CSS липкая позиция с вложенными элементами - PullRequest
Новая
       15

CSS липкая позиция с вложенными элементами

0 голосов
/ 03 декабря 2018

Насколько я знаю, липкая позиция прилипает к контейнеру, прежде чем выйти из кадра.

Моя проблема в том, что у меня есть несколько вложенных контейнеров и липкий элемент внутри них, и я хочу, чтобы он прилипал к его прародителю.

Можно предположить, что я раздуваю своего внутреннего липкого ребенка,но проблема в том, что он должен оставаться внутри своего родителя, потому что родительский элемент представляет собой flexbox, который содержит два элемента, и я хочу, чтобы один из этих элементов был липким, в то же время позволяя другому прокручиваться при переполнении.

Anпример 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 прокручивается через него.

Iзнаю, что css не поддерживает четкое решение, вопрос в том, есть ли хитрость для его решения.

1 Ответ

0 голосов
/ 03 декабря 2018

Не уверен, что вы пытаетесь сделать, но это где-то рядом с тем, что вам нужно? 

.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>
...