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

user_15081526 0
Viewed 275

My intro HTML/CSS course has asked us to place a box in the nav bar: It should have a generic box for a logo on the right side of the nav that has a black background color. It should be 80 pixels by 80 pixels and touch the right side of the nav.

However, I've been unable to find any way to place something on top of the navbar. I tried adding div to the nav, but then the box was hidden under the navbar. Any tips?

HTML(I know this isn't the best way to create a navbar, but it's what was shown so far:

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>

navbar css html
3 Answers

You can use position:absolute on the box with top and left

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>

user_53853810 

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>

Admin1

Us flex: 1; on textbox to textbox move right

user_148216700
Related