Javascript 选中或拖动时，将div置于其他div之上

我在父div中有一堆可拖动的div。所有div都有一个弹出式编辑面板来编辑它们的内容。问题是div相互重叠，因此当编辑面板打开时，它会被一个div覆盖。相反，我想要的是，每当我单击一个div并拖动它时，它应该与其编辑面板一起位于顶部。我该如何解决这个问题

---

我相信您将需要CSS和Angular的混合：

如果是与之交互的最后一个节点元素，则使用Angular将

活动的
类名添加到
节点
元素，例如
class=“node{{lastInteraction（node.id）？'active'：'}}”
（可以使用ng click更新lastInteraction（）将使用的变量）

为

.node.active

添加样式，并使用

z-index

值将其置于其他元素之上

有关

z-index

的更多信息，请点击此处：

<div ng-repeat="node in nodes track by $index" ng-if="node!==undefined">
    <div class="node" id="node{{node.id}}">
        <div ng-include="'components/nodeTemplate.html'"></div>
        <div ng-include="'components/editContent.html'"></div>
    </div>
</div>

.node{
    width: max-content;
    position: absolute !important;
    border-radius: 5px;
    left: 15px;
    top: 15px;
    display: flex-row;
    justify-content: center;
    align-items: center;
}

.edit-panel{
    font-weight: 400;
    font-size: 15px;
    position: absolute;
    background-color: #fff;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    left: 430px;
    top: 160%;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}