按dom的顺序优雅地制作重叠的DIV

Question

<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”成为最前面的。

是否有任何优雅的方法可以按dom的顺序对重叠的DIV进行排序？

P.S。我使用knockout.js作为我的框架和模板引擎。我曾考虑将后一张卡添加到带有jQuery的#cards中，这意味着我必须在模板引擎中放弃“foreach”，或者以相反的顺序存储我的模型。那将是丑陋的。

p.s.2手动设置div的z-index的方法是最后的选择。

Answer 1

这就是DOM的工作方式，除非你使用z-indexing，否则DOM树中的较低元素将与较高的元素重叠。

使用它有利于你的优势并反转你的卡的顺序，而不是使用黑客和复杂的代码，它最终会出现更多的错误，并且可能无法显示在你想要的不同浏览器上。

Answer 2

最后定义的DOM顺序位于顶部。覆盖这种情况的一种方法是使用css＆＃39; z-index财产。

唯一的另一种选择是将卡片重新排序为符合您偏好的顺序。