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

Question

我的问题是如何将导航栏放在标题上方。从我当前的代码，我的导航栏显示在标题图像后（如图所示） image

以及我想要的： -

这是我的代码： -

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完全符合您的需求。 （我必须用背景颜色替换你的图像，因为那个图像存储在你的电脑本地，我无法访问它，请用你的背景图像替换背景颜色属性，一切都会正常工作。）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

最诚挚的问候， CATA

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

您需要将position：absolute设置为div（nav父级，将div或id添加到div元素）。然后，您可以使用top，left，right和bottom属性移动导航（例如，以px为单位）。

为了您的安慰，您可以将div放在另一个div（带有标题的div）中，因为这样您可以使用此div的边距亲属。这样：

1

和css：

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