Question

尝试让图像位于导航下方时遇到一些基本问题。目前它位于导航的后面。

每个基本页面将为关于我们，联系我们，期限

创建一个独特的图像

基本页面HTML设置：

<header>
    <div class="basicbanner">
      <%= image_tag("1280x400-about.jpg", style: "background-image", class: "img-responsive", alt: "Diving Image") %>
    <div class="container">
      <div class="row">
        <div class="basicbanner-title center">
          <h1>About us</h1>
        </div>
      </div>
    </div>
    </div>

</header>

横幅广告的CSS设置：

.basicbanner {
  min-height: 400px;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.basicbanner-title  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 620px;

  h1  {
    text-transform: uppercase;
    color: white;
  }
}

通过此设置，它仍然位于导航器后面，并试图让它位于下方。

不了解发生冲突的位置，并尝试了以下样式中显示的几种方法。

Navbar CSS

.navbar {
  border: 0px solid rgba(0, 0, 0, 0);
  background: #70cbce;
  //background: transparent;
  margin: auto;
  min-height: 60px;
  padding-top: 10px;
  position: fixed;
  //top: -60px;
}

.navbar.open {
  top: 0;
}

.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
  color: #fff;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  //letter-spacing: 1px;
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: #0a4f6f;
  opacity: 0.6;
}

.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 10px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: #4ec3cd;
}

.navbar-inverse .navbar-toggle {
  border-color: transparent;
}

/* HEADER AND LOGO*/

.header{
    padding-top:40px;
    padding-bottom:50px;
    width: 100%;
    font-size:18px;
}


#logo {
  float: left;
  //margin-right: 10px;
  //font-size: 1.7em;
  //color: #fff;
  //text-transform: uppercase;
  //letter-spacing: -1px;
  margin-top: -10px;
  //font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

因此需要让它坐在导航仪下面并且也能够响应。

Answer 1

抱歉，但我不清楚你想要获得什么。为什么要将image_tag保留在导航上？导航html代码应位于顶部，导航下方的图像。然后，您可以设置以下属性：

overflow: hidden; 
z-index : a negative or positive number;

z-index将使不同的div，溢出，保持一个在另一个上显示。如果您希望导航溢出带有明显背景的图像，则导航应该具有

z-index: +1;

这样，当您将鼠标悬停在导航上时，悬停css样式将起作用。图片应该有：

z-index: -1;

另外你应该把两个div放在另一个上面，我用过：

position: relative;
margin-top: -70px;

对于位置相对而言，div将相对于父div设置，如果你正确设置可能是nav div，那么使用margin-top negative你将使图像向上，用导航div溢出。在我的情况下，我的导航div的高度为70px所以我使用-70px，你还应该检查div是否有边距和填充。

我希望我没有错过任何东西，我有时会遇到不同窗口大小的问题，所以我使用mediaqueries。有关您可以问我的任何其他信息，仍然有在线教程如何执行此操作，但我在最近的搜索中找不到它们。

如果我完全误解了你的要求，请不要贬低我，我只是这就是你想要实现的目标。

由于最好的祝福 Fabrizio Bertoglio

RoR - 横幅图片下面的导航不在

1 个答案: