问按照dom的顺序优雅地进行重叠的DIVs排序

EN

<div id="cards">
  <div class="card">card 1</div>
  <div class="card">card 2</div>
</div>

#cards { position: relative }
.card { position: absolute; left: 0 }

我在试着做一副纸牌。

但是，当我使用上面的方法时，“卡片2”成了最前面的一张。

有没有什么很好的方法可以让重叠的DIVs按dom的顺序排序？

附注：我使用knockout.js作为我的框架和模板引擎，我考虑用jQuery将后一张卡片放在#卡片前面，这意味着我必须放弃模板引擎中的"foreach“，或者以相反的顺序存储我的模型。那就太难看了。

p.s.2像手动设置div的z索引这样的方式是最后的选择。