CSS z-index 在我的 Rails 5 应用程序中表现异常答案

【问题标题】：CSS z-index behaving strangely in my Rails 5 applicationCSS z-index 在我的 Rails 5 应用程序中表现异常
【发布时间】：2017-05-02 21:37:04
【问题描述】：

我正在使用带有 SASS + Bootstrap 的 Rails 5，并且我有以下 CSS 代码：

@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {

  background: #fff image-url('noise.png');

  div.site-top {

    position: fixed;
    width: 100%;
    height: 178px;
    background: #fff image-url('logo01.jpg') no-repeat;
    -webkit-box-shadow: 0px 5px 3px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 5px 3px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 5px 3px 0px rgba(50, 50, 50, 0.75);

    div.main-title {

      padding: 0px 0px 0px 290px;
      font-family: 'Dancing Script';
      font-size: 60px;
      font-weight: bold;
      color: #fccf00;
      text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);

      div.secondary-title {

        margin-top: -17px;
        padding: 0px 0px 0px 35px;
        font-family: 'Montserrat';
        font-size: 22px;
        font-weight: bold;
        color: #49840c;
        text-shadow: 0px 0px 0px rgba(150, 150, 150, 1);

      }

    }

    div.top-menu {

      margin: 25px 0px 0px 0px;
      text-align: right;

      height: 54px;

      ul {

        margin: 0px 47.5px 0px 47.5px;
        padding: 0px 0px 0px 0px;

        li {


          float: right;
          list-style-type: none;
          padding: 15px 40px 14px 0px;

          a {

            color: #666;
            font-size: 18px;
            font-weight: bold;

          }

          a:hover {

            text-decoration: none;
            color: #333;

          }

        }

      }

    }

  }

  div.container {

    z-index: -5;

    div.site-body {

      padding: 198px 20px 140px 20px;
      background-color: #fff;

      div.woman-from-fifties {

        float: left;
        height: 350px;
        background: #fff image-url('wff2.jpg') no-repeat;

      }

    }

  }

}

适用于这个app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Clean House Serviços Domésticos</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <div class="site-top">
      <div class="main-title">
        Clean House
        <div class="secondary-title">
          Serviços Domésticos
        </div>
      </div>
      <div class="top-menu">
        <ul>
          <li><a href="/clientes">Clientes</a></li>        
          <li><a href="/fale_conosco">Fale conosco</a></li>        
          <li><a href="/localizacao">Localização</a></li>        
          <li><a href="/sobre_nos">Sobre nós</a></li>        
          <li><a href="/">Homepage</a></li>
        </ul>
      </div>
    </div>  
    <div class="container">
      <div class="site-body clearfix">
        <div class="site-content">
          <%= yield %>
        </div>
      </div>
    </div>
  </body>
</html>

还有这个app/views/website/index.html.erb

<div class="col-md-4 woman-from-fifties">
</div>
<div class="col-md-8">
  <div class="well">
    teste
  </div>
</div>

生成与此图像类似的页面

一切正常，直到我向下滚动页面并在下部看到 Bootstrap wells，如您所见，它有 z-index: -5，最终覆盖了我的上部横幅，如您在这张图片中看到的：

我真的不明白发生了什么。就我而言，在这个区域插入z-index: -5的所有元素都应该在上半部分的下方。

谁能解释我做错了什么？

【问题讨论】：

增加标题的z-index大于内容
我真的以为这个z-index: -5 会被它里面的所有元素继承。当我在上部制作z-index: 5 时，它起作用了。感谢您的帮助！
您能发帖作为答案让我接受吗？
很高兴为您提供帮助

标签： html css ruby-on-rails twitter-bootstrap sass

【解决方案1】：

我认为这将帮助您尝试此操作

div.site-top {
 z-index:999;
}

div.container {
 position:relative;
 z-index:9;
}

【讨论】：