Bring div on top of other divs when selected or dragged

Question

I have a bunch of draggable divs inside a parent div. And all the divs have a popup edit panel to edit their contents. The problem is divs are on top of one another, thus when the edit panel is opened it gets covered by a div. Instead what I want is whenever I click on a div of drag it, it should be on the top along with its edit panel. How do I fix this?

<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);
}

Answer 1

I believe you'll need a mix of CSS & Angular here:

1. Use Angular to add an active classname to your node element IF it is the last node element that was interacted with eg class="node {{lastInteraction(node.id)?'active':''}}" (could use ng-click to update variables that lastInteraction() would use)
2. Add styling for .node.active with a z-index value to place it above other elements

More info on z-index here: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index