I am facing an issue with draggable divs inside a parent container. Each div has a popup edit panel to modify its content. The problem arises when the divs overlap, causing the edit panel to get hidden behind another div. I want to ensure that whenever a div is clicked or dragged, it appears on top along with its edit panel. How can I resolve this?
https://i.sstatic.net/e4gBD.png
<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);
}