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 (ie 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.

Answer 2

First problem is that absolute positioned elements refers to the first parent element with a position different from static .

This means that if no parents have fixed , relative , or absolute position, it will refer to the body, that is not what you want in this case.

Then put position: relative; to your parent div.

Second problem: with absolute position, you can stop using width and height and start using top , left , bottom and right properties;

Setting all them to 0 means extends the object to the parent boundaries .

But here you want to overlap them, then... simply, use a negative value equals to the size of the parent borders: 15px;

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

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

I've used dashed borders so you can see the underneath parent's borders ;)

Answer 3

Why doesnt this work for you? If i understand you right, you just want to mask the parent DIV with the child 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>

Output on chrome:

To make it generic, get the parents position/dimension using offsetTop/Left/Height/Width methods and set the child's dimensions/position using these, im sure there are plenty of posts on SO that do this..

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

Works fine

EDIT: added with and height inherit for you & positioned properly

Answer 5

Try this:

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

update a fiddle for you http://jsfiddle.net/yNFxj/16/