我希望我的下拉導航欄與下一個內容重疊

我嘗試使用復選框制作帶有點擊下拉選單的導航欄，但是，當我點擊復選框時，它的內容像塊元素一樣下降，但我希望它位于影像的頂部

.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,[email protected],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>

我期待下拉內容重疊在影像上而不是下拉

uj5u.com熱心網友回復：

做起來非常簡單，您將div類content設定為，position:absolute以便它從正常的檔案流中取出，因此當它出現時，它會出現在內容的頂部。設定父元素（在您的情況下為divwith 類drop-down，position:relative以便下拉選單相對于此元素定位。

Kevin Powell 做了一個很好的視頻來幫助你入門，還有一個很好的 CSS 技巧解釋器。希望這可以幫助。

.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 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 ">

uj5u.com熱心網友回復：

給下拉位置：絕對或位置：固定。無論您滾動多少，它都會保持在頂部。

標籤：htmlcss图片落下导航

上一篇：新手Golang。為什么我的區域變數在呼叫之間保存？

下一篇：如何使用Jquery獲取影像以將變數傳遞到下一頁