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 for the text：

/* 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-index的内容具有绝对或固定位置。

只需在导航栏高度上添加一个margin-top到你的身体。然后，您的所有内容都应保持在导航栏下方。

Answer 2

如果将其设置为绝对值。您可能需要将宽度设为100％我基本上将整个导航移到标头标记，并按如下方式定义

header{
    position: absolute;
    z-index:2;
    width: 100%;
}

HTML定位：导航栏和文本之间的重叠

2 个答案: