Html CSS 我想要一个 div 位于一切之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7421775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS I want a div to be on top of everything
提问by Flo
How do I make an html div tag to be on top of everything?
如何使 html div 标签位于所有内容之上？
回答by Skylar Anderson
In order for z-index to work, you'll need to give the element a position:absoluteor a position:relativeproperty. Once you do that, your links will function properly, though you may have to tweak your CSS a bit afterwards.
为了使 z-index 工作，您需要为元素提供 aposition:absolute或一个position:relative属性。一旦你这样做了，你的链接就会正常工作，尽管你可能需要稍微调整一下你的 CSS。
回答by Richard JP Le Guen
For z-index:1000to have an effect you need a non-static positioning scheme.
为了z-index:1000产生效果，您需要一个非静态定位方案。
Add position:relative;to a rule selecting the element you want to be on top
添加position:relative;到规则，选择您想要位于顶部的元素
回答by A. Morel
Yes, in order for z-index to work, you'll need to give the element a position:absolute or a position:relative property.
是的，为了让 z-index 工作，你需要给元素一个 position:absolute 或 position:relative 属性。
But... pay attention to parents!
但是……家长们要注意啦！
You have to go up the nodes of the elements to check if at the level of the common parent the first descendants have a defined z-index.
您必须上升元素的节点以检查在公共父级的级别，第一个后代是否具有定义的 z-index。
All other descendants can never be in the foreground if at the base there is a lower definite z-index.
如果在底部有一个较低的确定 z-index，则所有其他后代永远不会在前台。
In this snippet example, div1-2-1 has a z-index of 1000 but is nevertheless under the div1-1-1 which has a z-index of 3.
在此代码片段示例中，div1-2-1 的 z-index 为 1000，但仍位于 z-index 为 3 的 div1-1-1 之下。
This is because div1-1 has a z-index greater than div1-2.
这是因为 div1-1 的 z-index 大于 div1-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>回答by Rich Bradshaw
You need to add position:relative;to the menu. Z-index only works when you have a non static positioning scheme.
您需要添加position:relative;到菜单中。Z-index 仅适用于非静态定位方案。
回答by Vikrant Kashyap
z-indexproperty enables you to take your control at front. the bigger number you set the upper your element you get.
z-index属性使您可以在前面进行控制。您设置的数字越大，您获得的元素就越高。
positionproperty should be relativebecause position of html-elementshould be position relatively against other controls in all dimensions.
position属性应该是relative因为 position ofhtml-element应该在所有维度上相对于其他控件的位置。
element.style {
position:relative;
z-index:1000; //change your number as per elements lies on your page.
}
回答by KhmerNews Tech
I gonna assumed you making a popup with code from WW3 school, correct?
check it css. the .modal one, there're already word z-indexthere. just change from 1 to 100.
我假设你用 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 */
}
