JQuery（Javascript）/ CSS，在不使用定位的情况下重新排列DIV中元素顺序的方法？

Question

我有点不确定如何做到这一点。我有一个主面板，我希望根据动作显示DIV。我在html中有这样的DIVS：

<div id="container">
   <div id="1"></div>
   <div id="2"></div>
</div>

我不想乱搞定位，而是想让它在发生某些事情时我可以尽可能简单地将div id = 2放在div id = 1之上。任何建议都表示赞赏。

Answer 1

在您展示的示例中，您只需使用append和prepend jquery方法。

例如，div＃1然后div＃2

$('#container').append('#1').append('#2');

重新排序，div＃2然后div＃1

$('#container #2').remove().prependTo('#container');

有很多方法可以写这个。请记住prepend在容器的开头（第一个元素之前）放置一个元素，而append将元素放在最后一个元素之后。

Answer 2

你只需要对div进行绝对定位。如果发生了某些事情，只需设置元素的z-index即可。 例如（使用简单的JS）：

var d1 = document.getElementById('1');
var d2 = document.getElementById('2');

d1.style.zIndex = 1;
d2.style.zIndex = 2;

如果要更新它们，只需重置zIndex;）

Answer 3

删除第二个元素并将其重新插入第一个元素之前。

的javascript：

var d1 = document.getElementById('1');
var d2 = document.getElementById('2');

d2.parentNode.removeChild(d2);
d1.parentNode.insertBefore(d2, d1);
​