将一个div叠加在另一个div上，但不知道div的大小

Question

我试图把一个div放在另一个上面。 如果您知道div的尺寸，这非常简单。

解决方法： 如何将一个div叠加到另一个div上

那么，这是我的HTML：

<div class="container">
  <div class="overlay"></div>
  <div class="content"></div>
</div>

就我而言，我不知道“内容”或“容器”div的确切尺寸。 这是因为我无法控制div中的任何内容（我们正在为第三方开发人员提供可扩展的应用程序）。

在jsFiddle上查看我的示例叠加层应完全覆盖内容。 宽度100％，高度100％。 但是，这不起作用，因为在我的例子中我绝对定位了叠加层。

一种解决方案是使用JavaScript来获取内容div的大小，然后设置叠加层的大小。 我不太喜欢这个解决方案，因为如果没有指定图像大小，你需要等到图像加载并重新计算div的大小。

有没有办法在CSS中解决这个问题？

Answer 1

您可以将位置设置为绝对值，然后将所有4个定位值设置为0px ，这将使框展开。 在这里看一个演示： http ： //jsfiddle.net/6g6dy/

这样，如果你想在覆盖层或容器上填充（就像你使用实际的height和width值那样），你不必担心重新计算东西，因为它总是会调整到盒子的外部尺寸。

Answer 2

这是不可能的，因为：

1. 任何东西都不包含叠加以限制它的大小（因为没有高度/宽度应用于容器）。
2. 内容div的大小可以随着内容加载而改变（因为它没有固定的宽度/高度）。

我用JavaScript *解决了这个问题。 例如。

function resizeOverlay() {
  $('.overlay').css({
    width: $('.content').width()
    height: $('.content').height()
  });
}
$('.content').find('img').on('load', resizeOverlay);

*代码未经测试。

Answer 3

看这个演示： http ： //jsfiddle.net/rathoreahsan/kEsbx/

您是否正在尝试按上述演示中所述进行操作？

CSS：

#container {
    position: relative;
}

.overlay,
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay{
    z-index: 10;
    background: #ccc;
}

Answer 4

嘿，你看起来像这样： http ： //tinkerbin.com/Vc4RkGgQ

CSS

.container {
position:relative;
background:blue;
  color:white;
}

.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}

Answer 5

我不知道你究竟想做什么，但这可能会奏效：

container必须是relative ：静态的东西

overlay和content是absolute ：在第一个非静态父级中移动顶部/左侧; 无流量。
将相同的top/left设置为上部和上部元素的较高z-index 。

Answer 6

没有JavaScript，你确实可以做到这一点。 您的问题是#container元素相对于整个页面具有100％的宽度。 要解决此问题，您可以：

a）绝对定位，

#container {
   position: absolute;
}

b）让它漂浮或

#container {
   float: left;
}

c）使其显示为表格单元格

#container {
   display: table-cell;
}

上面的一个就够了，你不需要全部申请。 此外，您不应该绝对定位.content因为这会阻止#container具有相同的宽度/高度。

Answer 7

如果您在设置高度后担心图像加载，您可以继续并在包含div中设置图像的尺寸并使用padding-bottom hack 。 这样，当浏览器在页面上绘制时，它知道图像在加载之前有多大。