CODEWITHSUNDEEP
htmlcss
Balloon Fight
Balloon Fight

Reputation: 655

Stacking DIVS on Top Of Each Other In Ascending Order

I'm stacking divs on top of each other, it works but how can I stack them in ascending order instead of descending order like default? See this pen.

The end result should be blue green yellow red as opposed to default DOM red yellow green blue. Any idea?

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>

Upvotes: 1

Views: 411

Answers (1)

fredrivett
fredrivett

Reputation: 6584

If you want to stack them on top of each other like overlapping layers, then z-index will let you choose which order they should stack 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.

Upvotes: 2

Related Questions