引导程序。使某些容器元素“固定”

Question

我有这个bootstrap容器（实际上是bootstrap-vue）。

https://codepen.io/anon/pen/YMGoGL#anon-login

我正在尝试固定“ TOPBAR”和“ SEARCHBOX”，以便只有带有Lorem Ipsum文本的段落部分可以滚动。其余的必须固定在页面顶部（始终可见）。

android.enableJetifier=true 的问题在于该段落位于“ TOPBAR”顶部

是否可以实现我想要的？

更新

Answer 1

将同一行的顶部和顶部的搜索框分别用position:fixed和top: 0固定在顶部，然后将该段落放在自己的行中。您可以使用z-index property确保内容滚动到顶部栏的下方，而不是上方。

您可以使用：

  width: inherit;
  max-width: inherit;

确保fixed-bar与容器的宽度相同。

演示：https://codepen.io/glhr/pen/BEQjzj