CSS ie7 z-index

Я пытаюсь создать такую ​​графику:

Но я получаю:

CSS:

 #green { height: 500px; width: 500px; background-color: green; position:absolute;z-index:13; }
    #red { height: 300px; width: 300px; background-color: red; position:absolute; z-index:17; }
    #blue { height: 400px; width: 400px; background-color: blue; position:absolute; z-index:15;}

HTML:

<div id="blue"></div>
<div id="green">
    <div id="red"></div>
</div>

Основная проблема заключается в том, что код HTML должен быть определенным, как я указал выше. Подскажите, пожалуйста, какой код CSS мне нужен для реализации этой функции (должен быть совместим с IE7 +). Или, может быть, в этом поможет JS? Буду рад любому совету.