我试图将DIV放在顶部Bootstrap固定导航栏的顶部。我已经尝试过z-index和绝对定位等，但无论我做什么，Bootstrap导航栏似乎都具有最高优先级。
以下是codepen：http://codepen.io/anon/pen/kkRLKA
这是我的代码：
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Our Mission</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Have Done</a></li>
<li><a href="#">The State of Things</a></li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
CSS：
body { position:relative; }
div#navbar > ul li
{
padding-right:5vw;
}
@media only screen and (max-width: 1230px)
{
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
.LogoContainer
{
width:200px;
height:200px;
background-color:blue;
border:1px solid red;
position:absolute;
left:5%;
top:0;
z-index:1;
}
.jumbotron
{
height:70vh;
margin-bottom:0;
position:relative;
}
div.donation-form
{
border:1px solid red;
width:19%;
padding:7vh 0 5vh 0;
position:absolute;
right:5%;
bottom:-10vh;
}
div.donation-form input[type=text]
{
display:block;
width:60%;
height:50px;
margin:0 auto 8px auto;
padding-left:15px;
}
div.donation-form input[type="submit"]
{
display: block;
width:60%;
height:60px;
margin:20px auto 0 auto;
background-color: darkgray;
border:none;
}
div.donation-form p
{
font-size:1.1rem;
text-align:center;
}
如您所见，蓝色框的前1/4被导航条遮挡。如何使其与导航栏重叠？我也尝试过z-index：999999999！重要但它没用。
答案 0 :(得分：3)
在片段中看起来很奇怪，但是在jsfiddle上查看它。那是你想要的吗？
https://jsfiddle.net/t8j6pgg8/
body {} div#navbar > ul li {
padding-right: 5vw;
}
@media only screen and (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
.LogoContainer {
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid red;
position: absolute;
left: 5%;
top: 0;
z-index: 9999;
}
.jumbotron {
height: 70vh;
margin-bottom: 0;
position: relative;
}
div.donation-form {
border: 1px solid red;
width: 19%;
padding: 7vh 0 5vh 0;
position: absolute;
right: 5%;
bottom: -10vh;
}
div.donation-form input[type=text] {
display: block;
width: 60%;
height: 50px;
margin: 0 auto 8px auto;
padding-left: 15px;
}
div.donation-form input[type="submit"] {
display: block;
width: 60%;
height: 60px;
margin: 20px auto 0 auto;
background-color: darkgray;
border: none;
}
div.donation-form p {
font-size: 1.1rem;
text-align: center;
}<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a>
</li>
<li><a href="#">Our Mission</a>
</li>
<li><a href="#">Who We Are</a>
</li>
<li><a href="#">What We Have Done</a>
</li>
<li><a href="#">The State of Things</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="LogoContainer">
</div>
<div class="jumbotron">
</div>
</body>
答案 1 :(得分：1)
在这里放置带有您的徽标类的div（第3行代码），然后删除带徽标类的前一个div。
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="LogoContainer"></div>
<div class="container-fluid">