如何添加覆盖 DIV 以覆盖现有 DIV（使用 JQuery）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13755563/
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 add an overlay DIV to cover an existing DIV (using JQuery)?
提问by Zach
I have a 'container' DIV which may have all possible CSS styles like: margin, padding, border and different position (fixed, relative, absolute).
我有一个“容器”DIV，它可能具有所有可能的 CSS 样式，例如：边距、填充、边框和不同位置（固定、相对、绝对）。
I want to show a loading icon above the 'container' DIV and forbid the user to operate any control in the 'container' DIV.
我想在“容器”DIV 上方显示一个加载图标，并禁止用户操作“容器”DIV 中的任何控件。
<div class="container">
A lot of content here ...
</div>
How can I add an overlay DIV (using JQuery) which covers the entire 'container' DIV visible area (margin area should not be covered)?
如何添加覆盖整个“容器”DIV 可见区域（不应覆盖边距区域）的覆盖 DIV（使用 JQuery）？
Best regards, Zach
最好的问候，扎克
回答by VisioN
If nothing to change in CSS, then:
如果在 CSS 中没有任何改变，那么：
$("<div />").css({
position: "absolute",
width: "100%",
height: "100%",
left: 0,
top: 0,
zIndex: 1000000, // to be on the safe side
background: "url(/img/loading.gif) no-repeat 50% 50%"
}).appendTo($(".container").css("position", "relative"));
$("<div>Loading...</div>").css({
position: "absolute",
width: "100%",
height: "100%",
top: 0,
left: 0,
background: "#ccc"
}).appendTo($(".container").css("position", "relative"));.container {
border: 1px solid;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
A lot of content here ...
</div>