Positioning DIVs with z-index

[ecog]

I'm currently trying to position some DIVs in a specific order using z-index but they don't seem to be budging ive set it up in jsfiddle for you to have a look at to see if you can see any issues.Here's the order I'd like it to be from back to front:REDGREENBLUEYELLOWhttp://jsfiddle.net/BUWaZ/4/HTML\[code\]<div id="green"> <div id="yellow"> </div> <div id="red"> </div></div><div id="blue"></div>\[/code\]CSS\[code\]#green{ background-color:green; height:100px; width:100%; position:fixed; top:0;}#red { margin:-85px auto 0; width:406px; height:60px; background-color:red;z-index:-99999; }#blue{ margin:350px auto 0; width:60px; height:465px; z-index:99999; background-color:blue;}#yellow { margin:0px auto 0; width:170px; height:170px; background-color:yellow; z-index:99999; }\[/code\]