How to overlap parent background to child background

Question

I have two divs, one parent and other child both have their own background color. Child background color is overlapping the parent background color but I want parent background to overlap child background. Please follow the JS-Fiddle

<div id="p" >
    <div id="c"/>
</div>

Here is Fiddle link http://jsfiddle.net/26husf4v/2/

Red color (parent background) should come on top of blue(child) background, while the exceeding red color remain visible

Answer 1

Actually this is achievable with z-index, but in order to:

while the exceeding blue color remains visible

(If I got you right!) You should make your child element larger than the parent instead of what you have done earlier in the snippet.

So your final code should be something like this:

#p {
  width: 200px;
  height: 200px;
  background: red;
}

#c {
  position: relative;
  z-index: -1;
  width: 300px;
  height: 300px;
  background: blue;
}

<div id="p">
  <div id="c"></div>
</div>