Question

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

解决方案： How to overlay one div over another div

所以，这是我的HTML：

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

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

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

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

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

Answer 1

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

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

Answer 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。这样，当浏览器在页面上绘制时，它会知道图像在加载之前的大小。

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

7 个答案: