Html 当我将position:absolute添加到导航栏时，justify content:space-between停止工作

我试图有一个标题图像与导航栏是浮动在它上面

也就是说，css和html作为

<div class="header-container">

<!-- START HEADER IMAGE -->
<section class="header-image">
  <img src="./img/cntower.png">
</section>

<!-- END HEADER IMAGE -->

<!-- TOP LEVEL NAVIGATION -->
<div class="navbar">
  <div>
    <p>
      <strong>GTA Wholesale</strong>
    </p>
  </div>

  <div>
    <p><strong>All</strong></p>
    <p><a>Published</a></p>
    <p><a>Drafts</a></p>
    <p><a>Deleted</a></p>
    <p><a>New</a></p>
  </div>
</div>

<!-- END TOP LEVEL NAVIGATION -->


</div>

---

在我的navbar类中，如果我删除position:absolute，它不会出现在我的图像的顶部，但是当存在position-absolute时，属性之间的空格不适用。如何解决此问题？

您可以保留

绝对

参数，并将

左：0

和

右：0

添加到

导航栏

类中

例如：

img {
  max-width 100%;
}

.header-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.navbar {
  position: absolute;
  display: flex;
  justify-content: space-between;
  top: 0;
}

.header-image {
  display: flex;
}

.header-image img {
  max-width: 100%;
}