Question

This might be a more advanced CSS question about z-index:

You can see it in http://jsfiddle.net/cPdge/6/

Using the current Firefox, Chrome, Safari, or IE 9, you should see the blue DIV on top of the parent DIV.

How do we make the blue box go under the parent DIV? Note: If the z-index for the parent DIV is removed, then the blue DIV will go under it, but what if the z-index is not removed and remain as 0? Why is a z-index of 0 or no z-index specified make a difference? Usually, none specified is the same as 0.

The code in that page is:

    <div id="box1">
        some content
        <div id="subbox1">blue
        </div>
        <div id="subbox2">orange
        </div>
    </div>​

and CSS:

#box1 { width: 600px; height: 400px; border: 6px dashed orange; 
  position: absolute; top: 100px; left: 100px; background: #ffe; z-index: 0 }

#subbox1 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 310px; left: 100px; background: #eff; z-index: -10000 }

#subbox2 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 210px; left: 200px; background: #fc9; z-index: 2000 }

Answer 1

Your negative z-index would work if box1 were not positioned, otherwise the subboxes are in a child stacking context, and cannot be positioned under the parent box.

http://jsfiddle.net/cPdge/7/

Why is a z-index of 0 or no z-index specified make a difference?

The answer to this in on the document I linked to: to create a new stacking context, the element must be both positioned and have a declared z-index (or have opacity less than 1, which is a little weird…).