4

我正在尝试将一个 div 放在另一个上。如果您知道 div 的尺寸，这真的很简单。

此处已解决： 如何将一个 div 覆盖在另一个 div 上

所以，这是我的 HTML：

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

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

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

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

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

4

7 回答 7

2

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

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

于 2012-07-09T12:08:48.537 回答
1

这是不可能的，因为：

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

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

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

*代码未经测试。

于 2012-07-12T22:12:44.310 回答
0

看到这个演示：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;
}
于 2012-07-09T12:06:48.343 回答
0

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

CSS

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

.content {
position:absolute;
top:0;
left:15px;
background:red;
color:yellow;
}
于 2012-07-09T12:11:05.970 回答
0

我不知道您到底想做什么，但这可能有效：

container必须是relative：来自静态的任何东西

overlay并且content是absolute：在第一个非静态父级中移动顶部/左侧；无流量。
给相同top/left的顶部和更高z-index的上部元素。

于 2012-07-09T12:11:52.077 回答
0

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

a) 绝对定位，

#container {
   position: absolute;
}

b) 使其浮动或

#container {
   float: left;
}

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

#container {
   display: table-cell;
}

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

于 2014-05-30T09:12:01.460 回答
0

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

于 2016-08-05T17:16:32.140 回答