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

Question

我的介绍 HTML/CSS 课程要求我们在导航栏中放置一个框：它应该在导航右侧有一个通用的徽标框，背景色为黑色。它应该是 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>

Answer 2

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

.box1 {
  height: 80px;
  width: 100%;
  position: relative;
  z-index: 1;
  top: 0;
  bottom: 20px;
  background-color: red;
}

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

Answer 3

我们 flex: 1; 在文本框到文本框向右移动

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

Is there a way to add a box on top of a navbar?

html

css

navbar