HTML 定位 : overlap between navigation bar and text

Question

它是如此基础，但我似乎无法正确使用。导航栏位于导航栏下方之后的正文部分。此外，当出现警告消息(例如错误的凭据)时，它会位于导航栏下方，因此无法阅读。我究竟做错了什么？ (我正在使用 Rails 3.2 和 Ruby 4)。

在 application.html.erb 我有:

  <%= render "layouts/header" %>
  <% flash.each do |name,msg| %>
    <p class="alert"><%= content_tag :div, msg, :id => name %></p>
  <% end %>
  <p class="notice"><%= notice %></p>
  <%= yield %>
  <%= render "layouts/footer" %>

呈现的部分 html 代码:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
...etc...
    </div><!--/.nav-collapse -->
  </div>
</nav>

  <p class="notice"></p>

  <h2>Log in</h2>

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="GRy...00Z1w=" /></div>
  <div class="field">
    <label for="user_email">Email</label><br />
...etc...

关于 CSS，我使用 bootstrap 除了:

-导航的CSS:

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.loginnaam {
    font-size: 11px;
    padding: 16px 10px;
}

-文本的CSS:

/* JUMBOTRON ON HOME
================================================== */
.jumbotron {
  background-image: url('http://www.....com/....jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}


/* CUSTOMIZE THE CAROUSEL
================================================== */
/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* ILLUSTRATIES
================================================== */
.illustraties{
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

Answer 1

您的导航栏是固定的，这意味着它位于所有内容之上，除了具有更高 z - 索引且具有绝对或固定位置的内容。

只要在你的 body 上添加一个 margin-top，就像导航栏的高度一样。然后，您所有的内容都应位于导航栏下方。