如何从子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;放到您的父分区。>

第二个问题：在绝对位置上，您可以停止使用width和height并开始使用top，left，bottom和right属性；

将它们全部设置为0表示将对象扩展到父边界

。

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

top:    -15px;
left:   -15px;    
bottom: -15px;    
right:  -15px;
演示

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

我使用了虚线边框，所以您可以看到父母下方的边框;）

Answer 3

为什么这对您不起作用？如果我理解正确，您只想用子DIV遮盖父DIV？

Answer 4

尝试一下：

Answer 5

HTML