How to overlap a parent Div from a Child Div
I have some divs in my HTML and one of them is loading the image div, so I want it to overlap the 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.), the child div cannot overlap its parent. Here is my scripting link: http://jsfiddle.net/yNFxj/4/ I don't want to see anything from the parent div, but I want the child div to grow from the parent's size and overlap it.
Any ideas on how I can dot the dot with pure HTML and CSS and a generic way to implement this in my other pages?
PS: Border, Width, Height, etc. For example only, this can be removed.
source to share
Sajan is closest to what I can say, but it has several drawbacks:
-
Position: absolute
requires its parent to have a non-static status (this is often done with helpposition: relative
, which effectively works the same way as static). - You don't need to set the height and width of the child, only the parent.
Here's my fiddle for that 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 position: relative
for the parent.
I'm curious what exactly you are trying to achieve with this. I have a feeling that whatever it is, there is a better way.
source to share
The first problem is that the positioned elements absolute
refer to the first parent element with a position other than static
.
This means that if neither parent has a position fixed
, relative
or if absolute
it will refer to the body, this is not what you want in this case.
Then place position: relative;
in the parent div.
The second problem with the absolute position, you can stop using width
and height
and start using the features top
, left
, bottom
and right
;
Setting all of them to 0
means expands the object to its parent boundaries .
But here you want to match them, then ... just use a negative value equal to the size of the parent borders: 15px;
top: -15px;
left: -15px;
bottom: -15px;
right: -15px;
Demo : http://jsfiddle.net/yNFxj/9/
I used dashed borders so you can see the bottom parent borders;)
source to share
Why doesn't this work for you? If I understand you correctly, you just want to hide 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>
Chrome output:
To make it generic, find the position / size of the parent objects using offsetTop / Left / Height / Width methods and set the child measurements / position using them, and make sure there are many posts on SO that do this.
source to share
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 great
UPDATE: added with and inherit the height for you & positioned correctly
source to share
Try the following:
<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 fiddle for you http://jsfiddle.net/yNFxj/16/
source to share