How to Overlap Parent Div From Child Div


Tags: html,css,css3

Problem :

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.



Solution :

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.


    CSS Howto..

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to style HTML paragraphs with CSS to prevent empty lines between them?

    How to rotate an element and correctly position it with CSS or jQuery

    How to Use CSS transitions

    Z-index issues - How to bring a child element onto the parent's below element?

    How can I make a scrolling DIVs background transparent?

    How can I incorporate a slideshow into HTML?

    How to resize the width of div left to another which has float:left;?

    css: how to position a X sign at the top right corner of the img element

    How to make my twitter bootstrap overlap all other elements?

    How to set z-index in css background

    How to use CSS import in Liferay? CSS fast load works bad

    How do I restrict style to affect content only in modal?

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How to select lowest level ul in nested ul in Javascript/ css

    how to change css style for every second data (picture) from database?

    How can I code CSS to make Table like?

    How do I get this CSS text-decoration override to work?

    How to unbind() a hover/ mouseover event?

    Horizontal scrolling doesn't show up when I resize browser

    How do you style an android app?

    How to set div height to 100% of chosen print paper?

    How to extend background CSS styling indefinitely along the x-axis?

    How to get highlighted words and wrap it in new element with data-attribute?

    How to change the highlight color of textbox using focus selector in css

    How to get div so it always reaches the bottom?

    How to properly add divs inside another div so the original design doesn't break?

    How to target content through css

    How to apply CSS only to numbers in paragraph? (without )

    Changing a DIV to “position:fixed” then change it back to “static” and show the rest of DIVs