为了让z-index工作，你需要给予元素一个position:absolute或position:relative属性。一旦你这样做了，你的链接将正常工作，虽然你可能需要调整你的CSS后一点。

是的，为了让z-index工作，你需要给予元素一个position: absolute或position: relative属性。好的。
但是...家长们注意了！

元素的z索引可能受其父元素的z索引值限制。

您必须向下查看元素的节点，以检查在公共父节点的级别上，第一个后代是否具有定义的z索引。

所有其他后代永远不会在前台，如果在基地有一个较低的明确z-index。

在这个片段示例中，div1-2-1的z-index为1000，但仍然在z索引为3的div1-1-1之下。
这是因为div 1 -1的z指数大于div 1 -2。

.div {
  
}

#div1 {
  z-index: 1;
  position: absolute;
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#div1-1 {
  z-index: 2;
  position: absolute;
  left: 230px;
  width: 200px;
  height: 200px;
  top: 31px;
  background-color: indianred;
}

#div1-1-1 {
  z-index: 3;
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}

#div1-2 {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 80px;
  top: 5px;
  background-color: red;
}

#div1-2-1 {
  z-index: 1000;
  position: absolute;
  left: 70px;
  width: 120px;
  height: 100px;
  top: 10px;
  color: red;
  background-color: lightyellow;
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.rotate {
  writing-mode: vertical-rl;
  padding-left: 50px;
  font-weight: bold;
  font-size: 20px;
}

<div class="div" id="div1">div1</br>z-index: 1
  <div class="div" id="div1-1">div1-1</br>z-index: 2
    <div class="div" id="div1-1-1">div1-1-1</br>z-index: 3</div>
  </div>
  
  <div class="div" id="div1-2">div1-2</br>z-index: 1</br><span class='rotate blink'><=</span>
    <div class="div" id="div1-2-1"><span class='blink'>z-index: 1000!!</span></br>div1-2-1</br><span class='blink'> because =></br>(same</br>   parent)</span></div>
  </div>
</div>

更简单：

要使z-index:1000生效，您需要一个非静态定位方案。
将position:relative;添加到规则中，选择要放在顶部的元素

您需要将position:relative;添加到菜单中。Z索引仅在使用非静态定位方案时有效。

z-index属性使您能够在前端进行控制。你设置的数字越大，你得到的元素就越高。
position属性应该是relative，因为html-element的位置应该是相对于所有维度中的其他控件的位置。

element.style {
   position:relative;
   z-index:1000; //change your number as per elements lies on your page.
}

我假设你用WW3学校的代码做了一个弹出窗口，对吗？看看CSS。在.modal中，已经有单词z-index了。从1到100。

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

**编辑：**如果页面上的其他元素也分配了z-index，则需要调整对话框元素的z-index值。

看起来像是在<dialog>元素中嵌套一个元素，将其置于所有元素之上。如果您使用showModal()，它将水平和垂直居中放置在屏幕上，但您将失去与页面中其他元素的交互性。

document.querySelector("dialog").showModal();

<dialog>
  <div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element</div>

如果仍然希望与背景元素进行交互，可以使用show()方法。它仅水平居中放置在屏幕上。

document.querySelector("dialog").show();

<dialog>
  <div class="element">I am on top of everything else</div>
</dialog>
<div class="backdrop">Backdrop element to check if I am underneath or not.</div>