Липкий батончик изнутри гибкого контейнера - PullRequest
Новая
       21

Липкий батончик изнутри гибкого контейнера

0 голосов
/ 04 января 2019

Итак, у меня есть родительский контейнер, представляющий собой flex-box.

В этом контейнере у меня есть дочерний элемент div (.child-two), который я хочу выделить, как только он попадет в заголовок - 60 px изthe top.

Однако position: sticky не работает, если родительский контейнер является flex-box. 

<div class="parent-container">
   <div class="child-one"></div>
   <div class="child-two"></div>
   <div class="child-three"></div>
</div>

Вот css: 

.parent-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    padding-top: 24px;
    -ms-flex-line-pack: baseline;
    align-content: baseline;
}

.child-two {
  position: sticky;
  top: 66px;
  background-color: #2ecc71;
}

.child-one, .child-three {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-bottom: 16px;
}

Есть идеи, как мне этого добиться, не избавляясь от свойства .parent-container flex?

Это немного псевдо / сокращенный код, потому что это часть гораздо большего веб-приложения смного элементов.

1 Ответ

0 голосов
/ 04 января 2019

Вот пример того, что вы описали, трудно сказать, что именно пошло не так в вашем CSS, не видя этого.

div > div{
  width:100px;
  height:100px;
  margin:10px;
  border:solid 1px grey;
}

.parent-container{
  display:flex;
  height:1000px;
  padding-top:100px;
}

.child-two{
  position:sticky;
  top:60px;
}
<div class="parent-container">
   <div class="child-one"></div>
   <div class="child-two"></div>
   <div class="child-three"></div>
</div>
...