html - 出现在其他元素上的按钮悬停下拉列表？

Question

这是一个虚构的下拉列表。

当您将鼠标悬停在按钮上时，我使用了一个简单的过渡，它将链接的显示从无更改为阻止，但是如何使该列表显示在其他所有内容之上（下图显示了问题）。

如果有很多初学者错误，我很抱歉，我对编程非常陌生，我一周前就开始了。

.selecters {
  position: sticky;
  top: 0%;
  background-color: rgb(0, 0, 0);
  font-size: 0pt;
  padding-left: 200px;
  padding-right: 200px;
}

.btn {
  border: none;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 15px;
  padding-right: 50px;
  padding-left: 50px;
  font-size: 16pt;
  outline: none;
  border-inline-start: none;
  transition: 0.5s;
}

.drpbtn {
  position: relative;
  display: inline-block;
}

.drpcnt {
  position: absolute;
  min-width: 300px;
  display: none;
  font-size: 20pt;
}

.drpcnt a {
  background-color: white;
  display: block;
  border: solid black 2px;
  border-top: solid black 1px;
  text-decoration: none;
  color: black;
}

.drpbtn:hover .drpcnt {
  display: block;
}

.drpbtn:hover .btn {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

.drpcnt a:hover {
  color: white;
  background-color: black;
}

.drpcnt:hover .btn {
  color: white;
  background-color: black;
}

<div class="selecters">
  <div class="drpbtn">
    <button class="btn">Age</button>
    <div class="drpcnt">
      <a href="">100</a>
      <a href="">100</a>
      <a href="">100</a>
    </div>
  </div>
  <div class="drpbtn">
    <button class="btn">Worlds</button>
    <div class="drpcnt">
      <a href="">Ozgorn</a>
      <a href="">Valanro</a>
      <a href="">Eden</a>
      <a href="">Ankor</a>
      <a href="">primordial verse</a>
    </div>
  </div>

  <div class="drpbtn">
    <button class="btn">Powers</button>
    <div class="drpcnt">
      <a href="">Enhancements</a>
      <a href="">Abilities</a>
      <a href="">Spells</a>
    </div>
  </div>
  <div class="drpbtn">
    <button class="btn">Factions</button>
    <div class="drpcnt">
      <a href="">BlackSun</a>
      <a href="">Primordials</a>
      <a href="">Outcasts</a>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

给.drpcnt个高z-index赞，z-index: 200;。

.drpcnt {
  position: absolute;
  min-width: 300px;
  display: none;
  font-size: 20pt;
  z-index: 200; /*  THIS */
}

完整代码

.selecters {
  position: sticky;
  top: 0%;
  background-color: rgb(0, 0, 0);
  font-size: 0pt;
  padding-left: 200px;
  padding-right: 200px;
}

.btn {
  border: none;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 15px;
  padding-right: 50px;
  padding-left: 50px;
  font-size: 16pt;
  outline: none;
  border-inline-start: none;
  transition: 0.5s;
}

.drpbtn {
  position: relative;
  display: inline-block;
}

.drpcnt {
  position: absolute;
  min-width: 300px;
  display: none;
  font-size: 20pt;
  z-index: 200; /*  THIS */
}

.drpcnt a {
  background-color: white;
  display: block;
  border: solid black 2px;
  border-top: solid black 1px;
  text-decoration: none;
  color: black;
}

.drpbtn:hover .drpcnt {
  display: block;
}

.drpbtn:hover .btn {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}

.drpcnt a:hover {
  color: white;
  background-color: black;
}

.drpcnt:hover .btn {
  color: white;
  background-color: black;
}

<div class="selecters">
  <div class="drpbtn">
    <button class="btn">Age</button>
    <div class="drpcnt">
      <a href="">100</a>
      <a href="">100</a>
      <a href="">100</a>
    </div>
  </div>
  <div class="drpbtn">
    <button class="btn">Worlds</button>
    <div class="drpcnt">
      <a href="">Ozgorn</a>
      <a href="">Valanro</a>
      <a href="">Eden</a>
      <a href="">Ankor</a>
      <a href="">primordial verse</a>
    </div>
  </div>

  <div class="drpbtn">
    <button class="btn">Powers</button>
    <div class="drpcnt">
      <a href="">Enhancements</a>
      <a href="">Abilities</a>
      <a href="">Spells</a>
    </div>
  </div>
  <div class="drpbtn">
    <button class="btn">Factions</button>
    <div class="drpcnt">
      <a href="">BlackSun</a>
      <a href="">Primordials</a>
      <a href="">Outcasts</a>
    </div>
  </div>
</div>

z-index 文档