优雅地通过dom的命令使重叠的DIV订购

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

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

我试图制作一副牌。优雅地通过dom的命令使重叠的DIV订购

但是，当我使用上述方式时，“卡2”成为最前面的一个。

有没有什么优雅的方法可以通过dom的顺序使重叠的DIV排序？

p.s.我正在使用knockout.js作为我的框架和模板引擎。我曾考虑过将后一张卡片加入#cards中，这意味着我必须放弃模板引擎中的“foreach”，或者以相反的顺序存储我的模型。那会很难看。

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

来源

2012-09-19 Vergil Lu

这就是DOM的工作方式，除非使用z-indexing，否则DOM树中较低的元素将与较高的元素重叠。使用它来你的优势和扭转你的卡的顺序，而不是使用黑客和复杂的代码:) – Kyle

谢谢凯尔，我只是想确保没有其他方式 –

最后定义的DOM顺序位于顶部。一种方法来覆盖这是与css'z-index属性。

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

来源

2012-09-19 06:16:02

谢谢科尔文，我只是想确保没有其他方式 –

重新排序当然可以用JavaScript来完成，但最有可能的只是z-index。 –

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

将它用于您的优势，并颠倒您的卡的顺序，而不是使用黑客和复杂的代码，它最终会出现更多的错误，并可能不会显示，因为你打算跨越不同的浏览器。

来源

2012-09-19 06:23:57 Kyle

优雅地通过dom的命令使重叠的DIV订购

回答

相关问题