css z-index question

newbie to z-index. I want to put backleftBox and backrightBox behind the frontBox, but my code doesnt seem working.

   <style type="text/css">
    #fr开发者_开发知识库ontBox{ width: 400px; height: 500px; margin: 0 auto; background-color: #ccc; position: relative; z-index: 99;}
    #backleftBox{ width: 90px; height: 90px; background-color: green; position: absolute; left: -25px; z-index: 12;}
    #backrightBox { width: 90px; height: 90px; background-color: blue; position: absolute; left: -15px; z-index: 11;}
    </style>

<div id="frontBox">

    <div id="backleftBox"></div>
    <div id="backrightBox"></div>

</div>

---

The problem you have here is that "backleftBox" and "backrightBox" are children of "frontBox". Just move them outside "frontBox" and they should go underneath.

---

backrightBox and backleftBox can't be behind frontBox when they're inside it. Not sure how you want it to look, but they can't be nested like that, and you will then have to change your position, and margin attributes to align them. the z-index is fine the way you have it.