javascript - 将一个元素置于具有相同 z-index 的其他元素之前

标签 javascript html css

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

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

最佳答案

我假设你正在做类似的事情

container.appendChild(newDiv)

现在,当您点击并拖动一个元素时,您可以将它移到前面。

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

这会将您想要的 div 作为其父项的第一个子项插入,它将移动到顶部。

编辑:看起来 DOM 中后面的元素是显示在顶部的元素。在这种情况下,您可能想要附加子项。

recentlyClicked.parentElement.appendChild(recentlyClicked)

关于javascript - 将一个元素置于具有相同 z-index 的其他元素之前,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37039310/

相关文章:

javascript - Angular 6 - 添加到 Assets 中的本地文件(js、css、img)在运行时看不到。如何一次引用所有文件?

javascript - if 语句 JavaScript、数学在我的 else 语句中不起作用,我做错了什么?

javascript - 如何强制 VueJS 在 css 中不生成 "*,::after,::before"元素

html - 为什么这个图像不在固定宽度的 DIV 中居中?

php - 如何使用 PHP 创建/触发新的 jenkins 作业?

java - 在html中使用spring标签

javascript - 如何在不同的文件夹中调用 CSS?

CSS - <img> 标签的宽度小于图像文件。可以居中对齐吗?

css - 如何在 CSS 选择器中组合类和 ID?

javascript - 使用 JavaScript 获取 HTTP header