css - 将 div 修复到 Bootstrap 导航栏下的页面顶部

Question

基本上，我正在尝试将页眉区域固定到所有需要页眉的页面的顶部。这个想法是使用一个 div 和一个可以在需要时应用的类。

我尝试了一个基本的固定 div，但我总是以它与内容重叠而告终。任何人都可以解释/显示一些 css 以在正文顶部 float 一个 div，将所有内容向下推。

它也应该被修复，所以滚动只会影响下面的内容。

我的尝试给我留下了以下内容:

如您所见，应用程序标题与表格重叠，而所有其他内容应向下 float 。

Answer 1

您可以对相关的 div 应用固定定位，然后将 padding-top 添加到 body 以将其从顶部向下推。 Bootstrap通过将 padding-top 添加到 navbar 组件的 body 元素并结合 .navbar-fixed-top CSS 类来实现这种效果。否则，您可以将 padding-top 或相对定位 position: relative; 应用于内容元素。

.topbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%
}

.body {
    padding-top: 50px; /* height of fixed bar */
}

/* OR */

.content-element {
    position: relative;
    top: 50px;
}