我如何将导航栏放在标题上方

Question

我的问题是如何将导航栏放在标题上方。 从我的当前代码，我的导航栏后头部图像显示（如可以在图中看到） 图像

和我想要的是：

这是我的代码：-

 header { width:100%; height:275px; position:relative; overflow:hidden; z-index:-1; border:1px solid lightgreen; background-position: center center; display: flex; background-image:url("../images/index/header/header.jpg"); background-size: cover; } #navul01 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: transparent; } #navul01 li { float: left; } #navul01 li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; border:1px solid darkgreen; } #navul01 li a:hover { background-color: lightgreen; } 

  <div> <header> </header> </div> <div><nav> <ul id="navul01"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">blog</a></li> <li><a href="#contact">subjects</a></li> <li><a href="#about">contacts</a></li> </ul> </nav></div> 

Answer 1

您可以将元素（标头和导航）都包装在容器中，并指定相对于此容器的位置。 现在，您可以根据需要将nav元素绝对定位在该容器中。 在我们的情况下，下：0，左：0非常适合您的需求。 （我不得不用背景色替换您的图像，因为该图像存储在本地PC上，并且我无法访问它，请用您的background-image替换background-color属性，并且一切正常。）

 .header { position: relative; } header { width: 100%; height: 275px; position: relative; overflow: hidden; z-index: -1; border: 1px solid lightgreen; background-position: center center; display: flex; background-color: grey; background-size: cover; } nav { position: absolute; bottom: 0; left: 0; } #navul01 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: transparent; } #navul01 li { float: left; } #navul01 li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; border: 1px solid darkgreen; } #navul01 li a:hover { background-color: lightgreen; } 

 <div class="header"> <header> </header> <nav> <ul id="navul01"> <li> <a class="active" href="#home">Home</a> </li> <li> <a href="#news">blog</a> </li> <li> <a href="#contact">subjects</a> </li> <li> <a href="#about">contacts</a> </li> </ul> </nav> </div> 

https://codepen.io/Cata_John/pen/oEGMmR?editors=0100

此致，卡塔

Answer 2

你的HTML是这样的

 .main-wrapper { position: relative; } .nav-container { position: absolute; left: 0; bottom: 0; } 

 <div class="main-wrapper"> <header> </header> <div class="nav-container"> <nav> <ul id="navul01"> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">blog</a></li> <li><a href="#contact">subjects</a></li> <li><a href="#about">contacts</a></li> </ul> </nav> </div> </div> 

Answer 3

您需要为div设置位置：绝对值（导航父级，向div元素添加类或ID）。 然后，您可以使用顶部，左侧，右侧和底部属性（例如，以px为单位）移动导航。

为了您的舒适，您可以将div放在另一个div内（带有标题的一个div），因为这样您可以使用与该div相对的边距亲戚。 这条路：

<div>
    <header>
    </header>
    <div class="navbar">
        <nav>
            <ul>
              ...
            </ul>
        </nav>
    </div>
</div>

和CSS：

.navbar{
    position: absolute;
    margin-top: ...px;
    margin-left: ...px;
}