如何将导航菜单放置在背景图像下方的标题中？

Question

示例 HTML：

       <header id="banner">
            <h1>Dentistry Page</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="Services/services.html">Services</a></li>
                    <li><a href="About/about.html">About</a></li>
                    <li><a href="Contact/contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

CSS 示例：

header {
    background-image: url(Images/Homepage-Feature-Image-Mobile.jpg);
    height: 250px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 1em;
    padding: 1em;
    grid-area: header;
}

nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

nav ul li a {
    display: block;
    border: 1px solid;
    border-radius: .5em;
    padding: .25em;
    margin: .5em;
}

到目前为止，我在尝试了几种不同的组合后得到了上面的代码。我试图将导航菜单置于背景图像下方，但仍在标题元素内。

我尝试了几种不同的风格，但发现这最接近我正在寻找的风格。代码可能很混乱，因为这是我的第一个项目，我刚刚学习，但我似乎无法在任何地方找到答案。我希望将菜单放在背景图片下方。

Answer 1

如果容器内有一个元素（例如 div 或 header），并且您将背景应用于该容器，则只要该元素位于该容器中，就无法将该元素移动到背景下方。如果您想将导航栏保留在标题内，则必须在标题内创建一个专门应用背景的 div，然后该 div 之后的任何内容都将显示在下方。

  <header id="banner">
    <div id='background'>
      <h1>Dentistry Page</h1>
    </div>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Services/services.html">Services</a></li>
            <li><a href="About/about.html">About</a></li>
            <li><a href="Contact/contact.html">Contact</a></li>
        </ul>
    </nav>
  </header>





#background {
    background-image: url(Images/Homepage-Feature-Image-Mobile.jpg);
    height: 250px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 1em;
    padding: 1em;
    grid-area: header;
}

nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

nav ul li a {
    display: block;
    border: 1px solid;
    border-radius: .5em;
    padding: .25em;
    margin: .5em;
}