我将 Rails 5 与 SASS + Bootstrap 结合使用，我有以下 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 的元素都应位于上部下方。
谁能解释一下我做错了什么？
最佳答案
我想这会帮助你尝试这个
div.site-top {
z-index:999;
}
div.container {
position:relative;
z-index:9;
}
关于html - CSS z-index 在我的 Rails 5 应用程序中表现异常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41195415/