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

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 >
    <label for="checkbox">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    </label>

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

    <div >
      <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

CodePudding user response：

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,[email protected],100..700,0..1,-50..200" />
<header>
  <div >
    <label for="checkbox">
        Click me
      </label>
    <input type="checkbox" id="checkbox" />
    <div >
      <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 ">

CodePudding user response：

Give the drop down position:absolute or position:fixed. It will stay on top no matter how much you scroll.