为什么位置粘性不适用于引导程序 4答案

【问题标题】：Why position sticky is not working with bootstrap 4为什么位置粘性不适用于引导程序 4
【发布时间】：2019-11-11 20:30:59
【问题描述】：

我正在尝试在 div col-md-3 中制作粘性 div，如果我不使用 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>

【问题讨论】：

错字：positon --> position

标签： html css twitter-bootstrap css-position sticky

【解决方案1】：

粘性位置是由于父 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 class 1 也得到 height = div class 2 (500px)。

div 类 1 中的任何元素（位置：粘性）在接下来的 500 像素内都是粘性的。

如果任何元素是粘性的，那么它也具有相同的定义父高度。

【讨论】：