z-index problem

[tomitzel]

Hello,
I have a div name "container" which contains another div called "sidebar_left", which has another div called "red_rectangle", something like this:

<div id="container">
   <div id="sidebar_left">
      <div class="red_rectangle">
       </div>
    </div>
</div>

I want that the background from the container to be on top of the background of the red_rectangle. I tried z-index, but does not work or I might be using it wrong:

#container {
z-index: 999;
}
#sidebar_left {
z-index: 1;
}
#sidebar_left .red_rectangle {
z-index: 1;
}

Any advice?
Thanks.

[cdg10620]

If you want the background from container to be on top of the background of the red rectangle while the red rectangle is still on top you should be able to set it like this:

#container {
z-index:1;
}

#sidebar_left{
z-index: 0;
}

#sidebar_left .red_rectangle{
z-index: 2;
}

See if something like that works.