HTML定位：导航栏和文本之间重叠 [英] HTML positioning: overlap between navigation bar and text

问题描述

这是基本的，但我似乎不能得到它的权利。导航栏后面的正文文本的一部分位于导航栏下面。此外，当有一个警告消息（例如错误的凭据），它被定位在导航栏下面，使其无法读取。我究竟做错了什么？ （我使用Rails 3.2和Ruby 4）。

It's so basic but I don't seem to be able to get it right. Part of the body text that follows after the navigation bar gets positioned underneath the navigation bar. Also when there's an alert message (e.g. wrong credentials) it gets positioned underneath the navigation bar so that it can't be read. What am I doing wrong? (I'm using Rails 3.2 and Ruby 4).

在application.html.erb中有：

In application.html.erb I have:

  <%= 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代码的一部分：

Part of the html code that this renders:

<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导航：

.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;
}

推荐答案

它保持在所有内容之上，除了存在具有绝对或固定位置的较高z-索引的内容。

Your navbar is fixed, means that it stays above all content except there is content with a higher z - index which has absolute or fixed position.

只要在导航栏高度上添加边距顶部到您的身体。
所有的内容应该留在navbar下面。

Just add a margin-top to your body as much as the navbar has heigh. All your content should stay below the navbar then.

这篇关于HTML定位：导航栏和文本之间重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！