Почему позиция sticky не работает с начальной загрузкой 4 - PullRequest
Новая
       102

Почему позиция sticky не работает с начальной загрузкой 4

0 голосов
/ 11 ноября 2019

Я пытаюсь сделать липкий div внутри div col-md-3, он работает нормально, если я не использую col-md-3 класс, пожалуйста, скажите, что я делаю неправильно, 

.sticky {
  position: sticky;
  top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class=" col-3">
    <div class="sticky" style="border:1px solid; color:red">sticky</div>
  </div>
  <div class="col-9" style="height:1000px; border:1px solid; background:red">
  </div>
</div>

1 Ответ

0 голосов
/ 11 ноября 2019

Заклинивающая позиция происходит из-за родительского div (.col-3), потому что у него есть свойство display flex, при этом высота становится равной div (col-9).

Короче: 

<div style="display: flex;">
  <div class="1"></div>
  <div class="2" style="height="500px;"></div>
</div>

Теперь в приведенном выше HTML классе div 1 также присваивается высота = класс div 2 (500px).

Любой элемент (position: sticky) внутри класса div 1 является липким на следующие 500 пикселей.

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

...