将一个元素放在具有相同z索引的其他元素前面

Bring an element in front of others that have the same z-index

本文关键字：元素索引前面其他一个更新时间：2023-09-26

用户可以按下按钮在屏幕上创建新的div。每个div都是相同的，并且具有相同的z索引。较新的元素显示在较旧的元素前面。用户可以在元素周围拖动。我希望当用户拖动一个元素时，该元素现在永久地位于其他元素之前（直到创建/拖动另一个元素为止）。

是否可以在不跟踪JS中某个地方的z索引并在创建/单击时增加它的情况下做到这一点？如果可能的话，我想避免这种情况。有没有什么方法可以使用jQuery或其他东西让点击的元素看起来像是最近创建的（我想这只是由DOM中的位置决定的？）

我想你正在做类似的事情

container.appendChild(newDiv)

现在，单击并拖动图元时，可以将其移动到前面。

var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)

这将插入所需的div作为其父级的第一个子级，后者将移动到顶部。

Edit：DOM中后面的元素似乎就是顶部显示的元素。在这种情况下，您可能需要附加子项。

recentlyClicked.parentElement.appendChild(recentlyClicked)

点击后，您可以将一个类添加到元素中，其中针对该类的CSS具有略高的z索引。这可能是最干净的方法（不需要跟踪z索引，只需在鼠标向下和向上切换该类的存在

另一个想法（不确定它是否有效，但尝试起来可能很有趣）是在所有元素中添加tabindex="0"。他们现在可以获得关注。然后在CSS中添加一个针对这些元素的"：焦点"状态选择器。以此增加他们的z索引。我不记得焦点是在鼠标放下还是在完全点击后。它可能会在你不想要的元素上带来其他副作用的线条轮廓。并且扰乱了你网站上标签键的可用性。我可能不会使用这个，除非它在非生产环境中真的简单得多。