如何从Child Div重叠父Div

Question

我的HTML上有一些div，其中一个正在加载图像div，所以我希望它与父div重叠。这是我的代码：

<div id="something1">
    <div id="something2"></div>
    <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
        <div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
    </div>
</div>

当我使用不同的位置（即绝对，相对等）时，子div不能与其父级重叠。这是我的小提琴链接：http://jsfiddle.net/yNFxj/4/我不想看到父div的任何内容，但我希望看到子div增加为父级的大小并重叠它。

有关如何使用纯html和css以及通过其他任何页面实现它的通用方法来解决它的任何想法？

PS：边框，宽度，高度等只是例如，它可以删除。

Answer 1

Sajjan是我能说的最接近的，但他有一些缺陷：

1. Position: absolute要求其父级具有非静态位置（通常使用position: relative完成，其效果与静态相同）。
2. 您无需设置子项的高度和宽度，只需设置父项的高度和宽度。

Here's my Fiddle for it to demonstrate.

#parent {
    border: 5px solid gray;
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: 50px;
}

#child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
}

这里的关键是父母的position: relative。

但是，我很好奇，你究竟想要实现这一目标。我有一种感觉，无论是什么，都有更好的方式。

Answer 2

第一个问题是absolute个定位元素是指位置与static不同的第一个父元素。

这意味着，如果没有父母拥有fixed，relative或absolute职位，则会引用正文，这不是您想要的情况。

然后将position: relative;添加到您的父div。

第二个问题：在绝对位置，您可以停止使用width和height并开始使用top，left，bottom和{{1} } properties;

将所有内容设置为right表示 将对象扩展到父边界 。

但是在这里你要重叠它们，然后......简单地说，使用一个负值等于父边界的大小：15px;

0

演示：http://jsfiddle.net/yNFxj/9/

我使用了虚线边框，因此您可以看到父母的边框;）

Answer 3

为什么这不适合你？如果我理解你，你只想用子DIV掩盖父DIV？

<div id="something1">
  <div id="something2"></div>
  <div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
  </div>
</div>

Chrome上的输出：

为了使它成为通用的，使用offsetTop / Left / Height / Width方法获取父级位置/维度，并使用这些方法设置子项的维度/位置，我确定SO上有很多帖子可以做到这一点。

Answer 4

HTML

<div id="something1">
<div id="something2"></div>
<div id="parent">
    <div id="child"></div>
</div>
</div>

CSS

#parent { width: 100px; height: 300px; background-color: #a0a0a0; width:200px; height:250px; position: relative; }

#child { width: inherit; height: inherit; position: absolute; background-color: #a2f2e2; top: 0px; left: 0px; }

工作正常

编辑：添加和高度继承为你＆amp;妥善定位

Answer 5

试试这个：

<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
    <div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>

为您更新小提琴http://jsfiddle.net/yNFxj/16/