我需要徽標與導航欄重疊

Question

我希望徽標像這樣重疊我的導航欄：

到目前為止，我有這個：

如您所見，徽標只是使導航欄變大，如何使徽標與導航欄重疊？ 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;
}

Answer 1

徽標應為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;
}

也更新了編碼您的鏈接

Answer 2

選項之一：

 .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()">&#9776;</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> 

PS：全屏查看，目前還沒有真正優化。

Answer 3

如果您正在使用引導程序，則還可以執行以下操作：

<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，您必須放置位置（絕對，相對或固定）。 否則它將無法正常工作。

Answer 4

我認為您的問題不在CSS代碼中，而是在HTML中。 因為您將徽標圖像與導航欄項放在同一“ div”容器中。 因此，您的徽標不能大於導航“ DIV”。 嘗試將徽標圖像放置在單獨的“ DIV”中。 或者只是將山峰圖像（如您的示例中的樣子）放置在徽標下方，並使用CSS加上負邊距：

 .mountainsDiv { margin-top: -85px; }

現在，您的文本將與徽標圖像重疊。 您可以在段落'和CSS中使用填充來解決它：

 .mountainsP { padding: 90px 10px; }

我希望這會有所幫助:)