DIVS übereinander stapeln In aufsteigender Reihenfolge

Question

Ich staple divs übereinander, es funktioniert aber wie kann ich sie in aufsteigender Reihenfolge stapeln anstatt absteigend wie Standard? Siehe hierzu pen.

Das sollte Endergebnis bluegreenyellowred sein als DOM redyellowgreenblue auf Standard gegenüber. Irgendeine Idee?

css

.inner { 
position: absolute; 
} 
span{ 
    visibility:hidden; 
} 
.blue{ 
background:blue; 
} 
.green{ 
background:green; 
} 
.yellow{ 
background:yellow; 
} 
.red{ 
background:red; 
} 

html

<div class="outer"> 
    <div class="inner blue"><span>inner</span></div> 
    <div class="inner green"><span>inner</span></div> 
    <div class="inner yellow"><span>inner</span></div> 
    <div class="inner red"><span>inner</span></div> 
</div> 

Answer 1

Wenn Sie sie auf der jeweils anderen wie überlappenden Schichten stapeln wollen, dann werden z-index können Sie wählen, welche Reihenfolge sie stapeln in.

.blue{ 
    background:blue; 
    z-index: 4; 
} 
.green{ 
    background:green; 
    z-index: 3; 
} 
.yellow{ 
    background:yellow; 
    z-index: 2; 
} 
.red{ 
    background:red; 
    z-index: 1; 
} 

Codepen showing it in action here.