javascript - 按照 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？

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

ps2 手动设置 div 的 z-index 等方式是最后的选择。

Answer 1

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

使用它来发挥你的优势并颠倒你的卡片顺序而不是使用黑客和复杂的代码，它最终会出错，并且可能无法在不同的浏览器中按你的意图显示。

Answer 2

最后定义的 DOM 顺序位于顶部。覆盖它的一种方法是使用 cssz-index属性。

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