我想要的标志重叠我的导航条是这样的：
我需要的标志重叠导航栏
到目前为止，我有这样的： 
正如你可以看到标志使导航栏变大，我如何使标志与导航栏重叠？ 的codepen是https://codepen.io/anon/pen/NvqbLo
我认为这个问题是与CSS：
.topnav a {
float: left;
display: block;
color: #777;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
其中一个选项：
.topnav {
background-color: #F8F8F8;
margin-bottom:0px;
}
.topnav .logo { position: absolute; z-index:1; top:0; }
.topnav .nav { padding-left: 360px; }
.topnav ul.nav li { float: left; list-style:none; }
.topnav .nav a {
color: #777;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #D5D5D5;
color: #333;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav {
background-color: #134095;
}
.topnav a {
color: white;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}<div class="topnav" id="myTopnav">
<div class="container">
<a href="#home" class="logo" style="z-index:1;position:absolute;"><img src="https://preview.c9users.io/jafar70/toucan-tech/navimg.jpg"></a>
<ul class="nav">
<li><a href="#contact">lorem ipsum</a></li>
<li><a href="#contact">lorem ipsum</a></li>
<li><a href="#contact">lorem ipsum</a></li>
</ul>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
</div>
<div class="learn-more">
<br><br><br><br>
<div class="container">
<p class="title">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede</p>
<p class="lead">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<button class="btn"><div>Call to action <span aria-hidden="true" data-icon=">"></span></div></button>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>P.S：在全屏查看，没有真正响应在这一点上进行了优化。
我觉得你的问题是不是在CSS代码，它是在HTML代替。因为您将徽标图像与导航栏项目放在同一个“div”容器中。因此，您的标志不能大于导航'DIV'。 尝试将您的标志图像放在单独的'DIV'中。 或者只是把你的山的图像（因为在你的榜样应该如何的样子）以下标志和负利润率与CSS：
.mountainsDiv { margin-top: -85px; }
现在你的文本将带有徽标图像重叠。你可以在你的段落“和CSS与填充解决它：
.mountainsP { padding: 90px 10px; }
我希望这将有助于:)
也许最简单的解决方案是将导航栏下方的山背景图像放置在'z-index：-1'和'margin-top：-80px'之间（不确定需要多少像素边距，需要对它进行试验）CSS中的样式属性。 –
标志应该是float: left和菜单标签应该是float:right
.topnav a {
float: left;
display: block;
color: #777;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background-color: #134095;
margin-left:3px;
color:#fff;
}
而且更新于coded your link
如果您使用的引导，那么你可以做到这一点也：
<div class="container-fluid">
<div class="row">
<div class="col-md-2">ADD LOGO HERE</div>
<div class="col-md-10">ADD NAV HERE (adjust the left margin to -5px or -10px on col-md-10)
</div>
</div>
而对于z-index的申请，您必须把位置（绝对，相对或固定）。 否则它不会工作。
谢谢我添加了style =“position：absolute; z-index：1; top：0;”到标志，现在它工作 –