我想要的標誌重疊我的導航條是這樣的：
我需要的標誌重疊導航欄
到目前爲止，我有這樣的： 
正如你可以看到標誌使導航欄變大，我如何使標誌與導航欄重疊？ 的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;」到標誌，現在它工作 –