我想要一个 div 在一切之上

我如何使一个 html div 标记位于所有东西的顶部？我尝试加入 z-index: 1000，但它仍然是相同的。

356926 次浏览
小开
最佳答案

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

小开

为了使 z-index:1000产生效果，你需要一个非静态定位方案。

将 position:relative;添加到选择希望位于顶部的元素的规则中

小开

您需要将 position:relative;添加到菜单中。只有当您有一个非静态定位方案时，Z-index 才能工作。

小开

z-index属性使您能够在前面进行控制。设置的数字越大，得到的元素的上限就越大。

position属性应该是 relative，因为 html-element的位置应该是相对于其他控件在所有尺寸的位置。

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

我还以为你用三战学校的代码做了个弹出窗口，对吧？ 检查它 css.the。模态一，已经有字 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工作，您需要给元素一个 position: absolute或者 position: relative属性... ... 很好。

但是... 要听父母的话！

元素的 z-index 可能受其父元素的 z-index 值的限制。

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

如果在基部有一个较低确定度的 z-index，那么所有其他的后代都不可能出现在前景中。

在这个代码片段示例中，div1-2-1的 z-index为1000，但是它位于 div1-1-1之下，该 div1-1-1的 z-index 为3。

这是因为 div1-1的 z 索引大于 div1-2。

enter image description here

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

更简单地说:

enter image description here

小开

看起来像是将一个元素嵌套在一个 <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>


提交答案