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

Question

我有點不確定如何做到這一點。我有一個主要面板，我想根據一個動作顯示一個DIV。我在HTML佈局是這樣的div：

<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

你只需做這個絕對定位divs。如果發生什麼事，只需設置元素的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); 
​