选中或拖拽div时如何将其及附带编辑面板置于最顶层

核心思路 #

不需要单独调整编辑面板的层级。因为编辑面板是.node的内部子元素，只要父级节点被抬升到最上层，展开的面板会自然跟随父级处于所有元素最顶部，从根源上避免被其他节点遮挡。

具体实现步骤 #

1. 调整基础CSS #

给所有节点设置统一的基础z-index值，建立稳定的层叠基准，不需要修改原有.edit-panel的样式：

.node{
    width: max-content;
    position: absolute !important;
    border-radius: 5px;
    left: 15px;
    top: 15px;
    display: flex-row;
    justify-content: center;
    align-items: center;
    /* 新增基础层叠值 */
    z-index: 10;
}

常见踩坑提醒：不要单独给.edit-panel设置超高的z-index。只要父级.node设置了非auto的z-index，就会形成独立的层叠上下文，子元素的z-index再高，也跑不出父级的层叠范围，根本突破不了其他节点的遮挡，这也是之前问题出现的核心原因。

2. 增加动态层级控制逻辑 #

在对应的AngularJS控制器中新增两个状态，实现节点激活时的自动层级抬升：

• 用一个持续递增的计数器生成z-index值，保证新激活的节点永远比之前的节点层级高，避免同层级互相遮挡
• 用一个变量记录当前被激活（选中/拖拽中）的节点ID

// 控制器内配置
$scope.zIndexCounter = 100; // 初始计数器值，高于所有节点的基础z-index
$scope.activeNodeId = null;  // 记录当前激活的节点ID

// 节点激活触发方法，在点击选中、拖拽开始时调用
$scope.bringNodeToFront = function(currentNodeId) {
    $scope.zIndexCounter++; // 计数器自增，生成全局最高的z-index值
    $scope.activeNodeId = currentNodeId;
}

3. 绑定交互事件 #

给.node元素增加动态z-index绑定，同时接入对应的触发回调：

<div ng-repeat="node in nodes track by $index" ng-if="node!==undefined">
    <div 
        class="node" 
        id="node{{node.id}}"
        <!-- 动态绑定z-index：激活节点用递增的高值，其他节点用基础值 -->
        ng-style="{'z-index': node.id === activeNodeId ? zIndexCounter : 10}"
        <!-- 点击节点时触发层级抬升 -->
        ng-click="bringNodeToFront(node.id)"
        <!-- 拖拽开始时触发层级抬升，替换成你当前使用的拖拽库对应的dragStart回调即可 -->
        ng-drag-start="bringNodeToFront(node.id)"
    >
        <div ng-include="'components/nodeTemplate.html'"></div>
        <div ng-include="'components/editContent.html'"></div>
    </div>
</div>

最终效果 #

• 点击任意节点时，该节点会被抬升到所有元素最上层，附带弹出的编辑面板会自然跟随处于最顶部
• 拖拽任意节点时，节点会实时保持最上层渲染，不会被其他节点遮挡
• 未被激活的节点始终保持基础层级，不会抢占上层渲染空间

内容的提问来源于stack exchange，提问作者Satyaki Das