Bootstrap 4

Question

我试图创建一个可以使用绝对定位的子项进行滚动的div。我希望即使父卷轴滚动，绝对定位的元素也是可见的。我知道我需要将父元素设置为position：relative来实现这一点，但是我使用Bootstrap 4，如果我将父元素设置为relative，则没有任何变化。

Here you can see the starting state, when the parent is scrollable. 请注意行可滚动类：

<div id="opened" class="col-12 align-self-start lines lines-scrollable">

Here you can see the state when the overlay and the popup (absolute positioned children) are displayed.请注意其父级的行 - 不可滚动类：

<div id="opened" class="col-12 align-self-start lines lines-non-scrollable">

此时一切都很好，因为滚动位置为0：

$('#opened').scrollTop(0);

But if you scroll, the absolute positioned children are moving with the scrolled content out of the visible area too.您可以使用以下方式模拟滚动：

$('#opened').scrollTop(100);

Answer 1

当您将某物设置为绝对物时，将其放在相对于容器的位置（最近的容器，其位置为绝对或相对......）。但是当你向下滚动时，0位置会上升，这就是为什么你会看到这种行为。

换句话说，当你向上滚动div时，相对位置0也会改变，所以内部绝对div也会向上滚动。

您有两种选择：

1. 列表项将位置设置为固定，但是这使得它相对于页面（因此固定位置top：0;总是位于页面的顶部，无论它在html中的位置

OR

1. 将内部绝对div向上移动一级并使容器相对，这样您的HTML将如下所示：

https://jsfiddle.net/3adctabu/6/ - 您为第二次选择提供的jsfiddle的工作示例。

<div class="outer-container-that-is-relative">
  <div class="inner-absolute"></div>
  <div class="scrollable-content"></div>
</div>