html - 导航 Flexbox 上的中心 Logo

Question

我试图将 Logo 置于导航的中央，并让它稍微覆盖横幅图像(下图)。我不确定最好的现代方法是什么来实现这一目标。我似乎无法让它覆盖导航和横幅。我正在使用 flex 盒子。我尝试使用 z-index 和 matop 将其向下推到两个元素上，但它似乎不起作用。这是创建视觉效果的最佳方法吗？我缺少一些 CSS 吗？非常感谢您的帮助!

这就是我从下面的代码中得到的

 <header class="header">
      <img class="logo" src="img/stPaulProperLogo.png">
    </header>
    <nav class="navbar navbar-expand-md navbar-dark">
            <a class="navbar-brand" href="#">Fixed navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>

            </div>
          </nav>

<header id="banner"></header>

CSS

.header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    width: 100%;
    height: 25vh;
    background:black;
    background-repeat: no-repeat;

}




.logo{
z-index: 6;
margin-top: 100px;
height: 138px;
width: 138px;

Answer 1

结果

HTML

<header class="header">
  <img class="logo">
</header>

<nav class="navbar">
  <ul><li>Home</li> <li>Menu</li> <li>About</li></ul>
</nav>

<header id="banner"></header>

CSS

.header {
  width: 100%;
  height: 25vh;  
  background: black;
  display: flex;

  justify-content: center;
  align-items: flex-end;
}

.logo {
  background: yellow;
  width: 138px;
  height: 138px;

  margin-bottom: -100px;
}

演示

https://codepen.io/wilsonbalderrama/pen/GRgZwXW