Image in the top div always hide the bottom div with a negative margin

css, html, margin

Solution

If you need the red div top overlap the image you should use relative positioning as follows

JSFiddle Demo

CSS

#container {
    width:300px;
    margin-left:auto;
    margin-right:auto;
}
#container1 img {
    display:block;
    width:100%;
    height:auto;
}
#container2 {
    width:100%;
    height:200px;
    background:red;
    position:relative;
    top:-50px;
}

Problem

I created two divs with one stacks on top of the other. The top div contains an image which is displayed in block. The bottom div has a negative margin and a background color. However, the background color of the part of the bottom div that overlaps with the top div can not be displayed, although the content in the bottom div is shown on top of the top div. How can I display the background color on top of the top div as well? The following is the code and the live demo is available from here: http://jsfiddle.net/spencerfeng/6XFau/ HTML: ``` <div id="container"> <div id="container1"> <img class="responsive-img" src="http://www.fubiz.net/wp-content/uploads/2013/07/One-Ocean-One-Breath14.jpg" alt=""> </div> <div id="container2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus pretium orci, ac tristique mauris tincidunt sit amet. Vestibulum ornare in felis non fringilla.</p> </div> </div> ``` CSS: ``` #container { width:300px; margin-left:auto; margin-right:auto; } #container1 img { display:block; width:100%; height:auto; } #container2 { width:100%; height:200px; background:red; margin-top:-50px; } ```

Original source