在升序中将DIVS堆叠在彼此之上

Question

我将div叠加在一起，它可以工作，但我怎样才能按升序堆叠它们而不是默认的降序？请参阅此pen。

最终结果应为JsConfig<DateTime>.SerializeFn = date => date.ToString("yyyy-MM-dd hh:mm:ss"); blue green yellow，而非默认DOM red red yellow {{ 1}}。有什么想法吗？

CSS

green

HTML

blue

Answer 1

如果您想将它们叠加在一起，就像重叠图层一样，那么z-index将允许您选择应该堆叠的顺序。

.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.