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

徽标应为<h1>Space Calculator Demo</h1><br> If you were to start a trip at <script type="text/javascript"> function printTime() { var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); document.body.innerHTML = hours + ":" + mins + ":" + secs; } setInterval(printTime, 1000); </script> <div id="time"></div> , how long would it take you and how much food and water would you need?，菜单标签应为float: left

float:right

同时在coded your link

更新

Answer 2

其中一个选择：

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

P.S：全屏查看，此时没有真正的响应优化。

Answer 3

如果您使用bootstrap，那么您也可以这样做：

<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”中。容器与导航栏项目。因此，您的徽标不能大于导航＆＃39; DIV＆＃39;。尝试将徽标图片放在单独的“DIV”中。或者只是将您的山峰图像（如您的示例中所示的样子）放置在徽标下方，并使用带有负边距的CSS：

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

现在您的文字将与徽标图片重叠。您可以在段落中使用填充来解决问题。而对于CSS：

 .mountainsP { padding: 90px 10px; }

我希望这会有所帮助：）

我需要徽标与导航栏

4 个答案: