javascript 将一个 div 覆盖在另一个 div 上，但不知道 div 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11394568/
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
Overlaying one div over another, but not knowing the size of the div
提问by andyuk
I'm trying to lay one div over another. This is really simple if you know the dimensions of the div.
我试图将一个 div 放在另一个 div 上。如果您知道 div 的尺寸，这真的很简单。
Solved here: How to overlay one div over another div
在这里解决： 如何将一个 div 覆盖在另一个 div 上
So, here is my HTML:
所以，这是我的 HTML：
<div class="container">
<div class="overlay"></div>
<div class="content"></div>
</div>
In my case, I don't know the exact dimensions of the "content" or "container" div. This is because I don't have control over any of the content in the div (we are making our app extensible for 3rd party developers).
就我而言，我不知道“内容”或“容器”div 的确切尺寸。这是因为我无法控制 div 中的任何内容（我们正在使我们的应用程序可以为 3rd 方开发人员扩展）。
See my example on jsFiddleThe overlay should cover the content entirely. Width 100% and Height 100%. However, this does not work because in my example I positioned the overlay absolutely.
请参阅我在 jsFiddle 上的示例覆盖应完全覆盖内容。宽度 100% 和高度 100%。但是，这不起作用，因为在我的示例中，我绝对定位了叠加层。
One solution is to use JavaScript to get the size of the content div and then set the size of the overlay. I don't like this solution much since if image sizes are not specified, you need to wait until images are loaded and recalculate the size of the div.
一种解决方案是使用 JavaScript 获取内容 div 的大小，然后设置叠加层的大小。我不太喜欢这个解决方案，因为如果没有指定图像大小，您需要等到图像加载并重新计算 div 的大小。
Is there any way of solving this problem in CSS?
有没有办法在 CSS 中解决这个问题？
采纳答案by andyuk
It's not possible to do this because:
这是不可能的，因为：
- The overlay is not contained by anything to restrict it's size (since there is no height/width applied to the container).
- The size of the content div can change as content loads (since it has no fixed width/height).
- 覆盖层不受任何限制其大小的限制（因为没有应用于容器的高度/宽度）。
- 内容 div 的大小可以随着内容加载而变化（因为它没有固定的宽度/高度）。
I solved this by using JavaScript*. Eg.
我通过使用 JavaScript* 解决了这个问题。例如。
function resizeOverlay() {
$('.overlay').css({
width: $('.content').width()
height: $('.content').height()
});
}
$('.content').find('img').on('load', resizeOverlay);
*Code not tested.
*代码未经测试。
回答by prodigitalson
You could set the position to absolute and then set all 4 positioning values to 0pxwhich will make the box expand. See a demo here: http://jsfiddle.net/6g6dy/
您可以将位置设置为绝对，然后设置所有 4 个定位值，0px这将使框扩展。在此处查看演示：http: //jsfiddle.net/6g6dy/
This way you dont have to worry about recalculating things if you want padding on the overlay or the container (like you would if you used actual heightand widthvalues), because its always going to be adjusted to the outer dimensions of the box.
这样，如果您想在覆盖层或容器上填充（就像使用实际值height和width值时一样），您就不必担心重新计算东西，因为它总是会被调整到盒子的外部尺寸。
回答by Petr Peller
You can indeed do this without JavaScript. Your problem is that #containerelement has 100% width relative to the whole page. To fix this you can:
你确实可以在没有 JavaScript 的情况下做到这一点。您的问题是#container元素相对于整个页面的宽度为 100%。要解决此问题，您可以：
a) position it absolutely,
a) 绝对定位，
#container {
position: absolute;
}
b) make it float or
b) 让它漂浮或
#container {
float: left;
}
c) make it display as table cell
c) 使其显示为表格单元格
#container {
display: table-cell;
}
One of the above is enough, you don't need to apply all. Also you should not position .contentabsolutely as this will prevent #containerto have the same width/height.
以上之一就足够了，您不需要全部应用。此外，您不应该.content绝对定位，因为这会阻止#container具有相同的宽度/高度。
回答by Travis Michael Heller
If you are worried about images loading after the height is set you can go ahead and set the dimensions of the image in the containing div and use the padding-bottom hack. This way when the browsers paints over the page it knows how big the image will be before it loads.
如果您担心在设置高度后加载图像，您可以继续在包含的 div 中设置图像的尺寸并使用padding-bottom hack。这样，当浏览器在页面上绘制时，它就知道图像在加载之前有多大。
回答by Shailender Arora
Hey are you looking like this : http://tinkerbin.com/Vc4RkGgQ
嘿，你看起来像这样吗：http: //tinkerbin.com/Vc4RkGgQ
CSS
CSS
.container {
position:relative;
background:blue;
color:white;
}
.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
回答by CoR
I do not know what you are exactly trying to do but this might work:
我不知道你到底想做什么，但这可能有效：
containermust be relative: anything from static
container必须是relative：任何来自静态
overlayand contentare absolute:move top/left in first non static parent; no flow.
Give same top/leftto be on top and higher z-indexfor upper element.
overlay并且content是absolute：在第一个非静态父项中向上/向左移动；无流量。
给予相同的top/left顶部和更高z-index的上部元素。
回答by Ahsan Rathod
See this demo: http://jsfiddle.net/rathoreahsan/kEsbx/
看到这个演示：http: //jsfiddle.net/rathoreahsan/kEsbx/
Are you trying to do as mentioned in above Demo?
您是否尝试按照上述 Demo 中的说明进行操作？
CSS:
CSS：
#container {
position: relative;
}
.overlay,
.content{
display:block;
position: absolute;
top: 0;
left: 0;
}
.overlay{
z-index: 10;
background: #ccc;
}
