How to Overlap Parent Div From Child Div

Question

I have some divs at my HTML and one of them is loading image div so I want it overlap its parent div. Here is my code:

<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>

When I use different positions (i.e. absolute, relative etc.) child div couldn't overlap its parent. Here is my fiddle link: http://jsfiddle.net/yNFxj/4/ I don't want to see anything from parent div but I want to see that child div increased as parent's size and overlapped it.

Any ideas about how can I dot it just with pure html and css and with a generic way to implement it my any other pages?

PS: Border, width, height etc. are just for example, it can be removed.

Answer 1

Sajjan's the closest from what I can tell, but his has a few flaws:

1. Position: absolute requires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
2. You don't need to set the height and width of the child, just the parent.

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;
}

The key here is the position: relative on the parent.

I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.