首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTML定位:导航栏和文本之间的重叠

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

Stack Overflow用户
提问于 2015-01-31 17:48:29
回答 2查看 10.6K关注 0票数 0

它是如此基础,但我似乎不能正确理解它。导航栏位于导航栏下方之后的正文文本的一部分。此外,当出现警告消息(例如,错误的凭据)时,它会被定位在导航栏的下方,因此无法读取。我做错了什么?(我使用的是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;
}
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-31 18:08:27

你的导航栏是固定的,这意味着它保持在所有内容之上,除非有更高的z索引的内容有绝对或固定的位置。

只需在你的身体上添加一个页边距,就像导航栏的高度一样多。那么你所有的内容都应该留在导航栏下面。

票数 4
EN

Stack Overflow用户

发布于 2019-09-26 18:29:00

如果您要将其设置为绝对。你可能需要给出宽度为100%我基本上移动了整个导航到标题标签,并定义如下

header{
    position: absolute;
    z-index:2;
    width: 100%;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28250261

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档