如何更改DIV的位置，更改其顺序

How to change the position of a DIV, changing its order

本文关键字：顺序 位置 何更改 DIV      更新时间：2023-09-26

我说的不是浮动，也不是z-index（用于将一个置于另一个之上）。我说的是通过Javascript改变DIV的显示顺序。

例如，我有：

<div id='bottom'></div>
<div id='header'></div>

我想更改顺序，使"页眉"显示在"底部"上方，但不"覆盖"它，也不"浮动"。只是：

<div id='header'></div>
<div id='bottom'></div>

我想这是一个以前从未被问过的简单问题。

您可以通过id处理这个Remove元素，其中删除第一个元素（首先将其保存到某个变量中），然后使用JS中的appendChild（）或jQuery中的append（）（如果您使用该框架）将其追加。这应该有效地交换两者的位置。

编辑：看看这个，它基本上是你问的同一个问题，答案包含代码和你可能需要的一切。看起来你搜索得不够好。

也许前面的答案是：重新排列div，它显示了一种纯Javascript方式和一种jQuery方式来重新排列div。在谷歌上搜索"重排div"也证明是卓有成效的。

这取决于您使用的javascript库，但如果您使用jquery，这可以很容易地完成。只需键入以下内容：

var header = $('#header');
$('#bottom').next().remove;
$('#bottom').before(header);

根据您想要支持的浏览器，您只能使用flexbox使用CSS来实现这一点。否则，您可以选择其他人已经提到的javascript解决方案。

相关文章：