将一个元素放在具有相同z-index

Question

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

是否有可能在不在JS中某处跟踪z-index并在创建/点击时增加它的情况下执行此操作？如果可能的话，我想避免这种情况。有没有什么方法可以使用jQuery或其他东西来使点击的元素像最近创建的一样（我猜这只是由DOM中的位置决定的？）

Answer 1

我假设您正在做类似

的事情

container.appendChild(newDiv)

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

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

这会将您想要的div插入其父级的第一个子级，它将移到顶部。

编辑：看来DOM中的元素是顶部显示的元素。在这种情况下，你可能想要追加孩子。

recentlyClicked.parentElement.appendChild(recentlyClicked)

Answer 2

单击时，您可以在元素中添加一个类，其中针对该类的CSS具有略高的z-index。这可能是最干净的方法（没有跟踪z索引，只是在鼠标按下和鼠标移开时切换该类的存在。

另一个想法（不确定它是否有用，但尝试可能很有趣）将是为所有元素添加tabindex =“0”。他们现在可以获得关注。然后在CSS中添加一个针对这些元素的“：focus”状态选择器。用它增加它们的z指数。我不记得焦点发生在鼠标按下或完全点击后。它可能会在您不想要的元素上带来其他副作用线条轮廓。并且弄乱了您网站上Tab键的可用性。我可能不会使用它，除非它在非生产环境中以某种方式变得非常简单。