html - 有没有办法在导航栏顶部添加一个框？

Question

我的 HTML/CSS 入门类(class)要求我们在导航栏中放置一个框:它应该在导航右侧有一个通用的 Logo 框，背景色为黑色。它应该是 80 x 80 像素并触摸导航的右侧。

但是，我一直找不到任何方法可以在导航栏上放置一些东西。我尝试将 div 添加到导航栏，但随后该框隐藏在导航栏下方。有什么建议吗？

HTML(我知道这不是创建导航栏的最佳方式，但这是目前显示的内容:

nav {
    height: 80px;
    width: 100%;
    background-color: white;
    border-bottom: 4px solid green;
    box-shadow: 10px 10px 10px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
}

.box1 {
    height: 80px;
    width: 80px;
    background-color: red;
    border: 3px green;
    background-color: black;
}

<nav>
        <p class="p1">Home</p>
        <p class="p2">About</p>
        <p class="p3">Contact</p>
        <div class="box1"></div>
</nav>

Answer 1

您可以在带有 top 和 left 的框上使用 position:absolute

nav {
  height: 80px;
  width: 100%;
  background-color: white;
  border-bottom: 4px solid green;
  box-shadow: 10px 10px 10px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
}

.box1 {
  height: 80px;
  width: 80px;
  background-color: red;
  border: 3px green;
  background-color: black;
  position: absolute;
  top: 0;
  right:0;
}

<nav>
  <p class="p1">Home</p>
  <p class="p2">About</p>
  <p class="p3">Contact</p>
  <div class="box1"></div>
</nav>