CSS 如何在所有其他控件之上制作 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3948445/
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
How to make div on top of all other control
提问by new
I want my div to show on top of everything I put 100% width and height and it show above a lot of control except some have css z-index and other things. I tried to set the div z-index to a big number but this did not work.
我希望我的 div 显示在我放置 100% 宽度和高度的所有内容之上，并且它显示在很多控件之上，除了一些具有 css z-index 和其他东西。我试图将 div z-index 设置为一个大数字，但这不起作用。
{
width: 100%;
height: 100%;
top: 5px;
left: 0px;
background-color: #FFFFFF !important;
padding: 10px;
overflow: hidden;
visibility: visible;
display: block;
z-index: 500 !important;
position: relative;
}
回答by ?ime Vidas
Since you want to cover the whole screen, I recommend this:
由于您想覆盖整个屏幕，我建议这样做：
#overlayDiv {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:99;
}
Note, you don't have to set the display and visibility properties. Also, don't set padding or margin on this element! If you want it to have a padding, set a margin on its child/children.
请注意，您不必设置显示和可见性属性。另外，不要在这个元素上设置填充或边距！如果您希望它具有填充，请为其子项/子项设置边距。
Also, make sure that the DIV in question is a direct child of the BODY element.
另外，请确保有问题的 DIV 是 BODY 元素的直接子元素。
回答by cherouvim
In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).
为了将 html 元素从元素在屏幕上布局的自然流程中提取出来，您需要使用 position: absolute。这将允许元素成为其他元素之上的层（假设 z-index 值大于所有其他元素）。
Right now your element seems to have position: relative.
现在你的元素似乎有位置：相对。
回答by Arseni Mourzenko
Probably the issue is related to position:relative. Set it to absolute instead, and if you need to offset the element, use margininstead of top/left.
问题可能与position:relative. 将其设置为绝对值，如果需要偏移元素，请使用/margin代替。topleft
回答by Daniel
Could it be, that the problem only exists with selects and in IE6? If so, look at the answers here.
回答by Muhammed Moussa
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
