滚动时隐藏固定标题的 Bootstrap 4 卡片

Question

下面是带有 bootstrap 4 的 Html 代码。 它有一个固定的页眉和页脚，中间有可滚动的引导卡。 滚动时，一些卡片隐藏了标题。 如何让卡片在标题“后面”滚动？

 <header style="position: fixed; left: 0; top: 0; width: 100%;" class="bg-info text-center">header</header>
 <br><br>
 
<div class="container">
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div> 
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
 <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>
 <div class="card">
    <div class="container"> <h2>My Card</h2>  </div>
 </div>
  <p>simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text simple text </p>
</div>

<footer style="position: fixed; left:0; bottom:0; width:100%;" class="bg-info text-center">footer</footer>

see it in action here

Answer 1

您没有以正确的方式使用引导程序。对于页眉和页脚，请使用引导程序提供的 nav 栏，而不是 header 和 footer。

对于固定标题：-

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

对于固定页脚：-

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

参考：-

https://getbootstrap.com/docs/4.0/components/navbar/#placement

Answer 2

您可以使用z-index 作为标题。

你可以给任何你想要的数字，这个数字将使元素在 z 索引上移动。

添加到您的样式或 CSS

header{
z-index:99;
}