Problem med div'er i flere lag

Nedenstående kode volder mig en del problemer. Koden skal kunne følgende:
Blå box skal vises lige nedenfor grøn box(skal ikke overlappe), hvilket virker fint. Rød box skal også vises nedenfor grøn box, hvilket den gør, men den skal vises over blå box og ikke under som nu, dvs. rød skal overlappe blå. Jeg har forsøgt med z-index men det virker ikke når rød og blå ikke ligge i samme div. Opbygningen af koden skal helst ikke ændres, og z-index kan ikke flyttes til de yderste div'er. Dette vil give for omprogrammering i min kode og skal kun bruges i nødstilfælde :)

<div style="position: relative;">
  <div style="position: relative; background-color: green; width: 100px; height: 25px; z-index: 1;">grøn</div>
  <div style="position: absolute; left: 10px; background-color: red; width: 100px; height: 100px; z-index: 10;">rød</div>
</div>
<div style="position: relative;">
  <div style="position: relative; background-color: blue; width: 100px; height: 25px; z-index: 1;">blå</div>
</div>