I want my drop-down nav bar to overlap on-top with the next content

Question

I tried making this navigational bar with click drop-downs which I achieved using a checkbox, however, when I click on the the checkbox, its content drops down like a block element but I want it to sit on-top the image

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}

header {
  display: grid;
  grid-template-rows: auto 1fr;
}

.drop-down {
  grid-row: 1;
  width: 100%;
}

label {
  cursor: pointer;
  background-color: var(--coral);
  display: flex;
  justify-content: center;
}

[type="checkbox"] {
  display: none;
}

header a {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem 0 1rem 0;
}

header a:hover {
  background-color: #040628;
}

.content {
  display: none;
  background-color: var(--blue);
  padding: 1rem 0 1rem 0;
  z-index: 1000;
}

[type="checkbox"]:checked+.content {
  display: block;
}

.puzzles {
  width: 100%;
}

<header>
  <div class="drop-down">
    <label for="checkbox">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    </label>

    <input type="checkbox" id="checkbox" />

    <div class="content">
      <a href="#">Home</a>
      <a href="#">New</a>
      <a href="#">Popular</a>
      <a href="#">Trending</a>
    </div>
  </div>
  <img src="https://images.unsplash.com/photo-1666609393250-5ddc8fa87fa9?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0MTMxNTc&ixlib=rb-4.0.3&q=80" />
</header>

I was expecting the dropdown-content to overlap on the image instead of dropping down

Answer 1

It's pretty straightforward to do, you set the div with the content class to position:absolute so that it gets taken out of the normal document flow so when it appears it'll appear over the top of the content. Set the parent element (in your case the div with class drop-down to position:relative so that the drop down is positioned relative to this element.

Kevin Powell does a good video on this to get you started and there's a good explainer at CSS tricks too. Hope this helps.

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48
}


/* added css variable definitions */

 :root {
  --coral: coral;
  --blue: blue;
}

header {
  display: grid;
  grid-template-rows: auto 1fr;
}

.drop-down {
  grid-row: 1;
  width: 100%;
  /* added this */
  position: relative;
}

label {
  cursor: pointer;
  background-color: var(--coral);
  display: flex;
  justify-content: center;
}

[type="checkbox"] {
  display: none;
}

header a {
  text-decoration: none;
  color: white;
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem 0 1rem 0;
}

header a:hover {
  background-color: #040628;
}

.content {
  /*added this */
  position: absolute;
  display: none;
  background-color: var(--blue);
  padding: 1rem 0 1rem 0;
  z-index: 1000;
}

[type="checkbox"]:checked+.content {
  display: block;
}

.puzzles {
  width: 100%;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<header>
  <div class="drop-down">
    <label for="checkbox">
        Click me
      </label>
    <input type="checkbox" id="checkbox" />
    <div class="content">
      <a href="#">Home</a>
      <a href="#">New</a>
      <a href="#">Popular</a>
      <a href="#">Trending</a>
    </div>
  </div>
</header>
<img src="https://via.placeholder.com/1000x600?text=some+image ">