如何修复乱序点击Div时的Z-Index层级显示问题？

问题根源 #

你的代码在非顺序点击时出现层级错误，核心原因是原Z-Index逻辑依赖固定顺序（比如元素生成索引、点击先后的序列值），没有确保被点击元素始终获得当前全局最高的层级值，导致跳过点击时，后续元素的Z-Index无法覆盖之前点击过的元素。

两种可行修正方案 #

方案1：实时获取全局最大Z-Index（兼容性强）

每次点击时，遍历所有层级Div找出当前最高的Z-Index，将被点击元素的Z-Index设为最大值+1，确保它始终在顶层：

// 绑定点击事件（假设动态Div统一使用.layered-div类）
$(document).on('click', '.layered-div', function() {
    let maxZ = 0;
    // 遍历所有层级Div，找出当前最大Z-Index
    $('.layered-div').each(function() {
        const currentZ = parseInt($(this).css('z-index')) || 0;
        if (currentZ > maxZ) maxZ = currentZ;
    });
    // 给当前点击元素设置最高层级
    $(this).css('z-index', maxZ + 1);
    // 执行你的其他尺寸调整逻辑
    // ... 这里放你原来的尺寸调整代码 ...
});

方案2：维护全局Z-Index计数器（性能更优）

初始化一个全局计数器，每次点击时直接递增计数器并赋值给被点击元素，无需遍历：

// 初始化计数器，值设为比初始Z-Index高1即可
let currentMaxZ = 11;

// 动态生成Div时的初始层级设置示例
const divArray = [/* 你的数据源数组 */];
divArray.forEach((item, index) => {
    const $div = $('<div class="layered-div"></div>')
        .text(item.content)
        .css({
            position: 'absolute', // 必须是定位元素，Z-Index才生效
            'z-index': 10 + index, // 初始层级从10开始递增
            // 其他样式：top、left、width、height等
        });
    $('body').append($div);
});

// 点击事件逻辑
$(document).on('click', '.layered-div', function() {
    const currentZ = parseInt($(this).css('z-index')) || 0;
    // 避免重复递增（如果元素已经在顶层）
    if (currentZ !== currentMaxZ) {
        currentMaxZ++;
        $(this).css('z-index', currentMaxZ);
    }
    // 执行尺寸调整逻辑
    // ...
});

关键注意事项 #

• 所有层级Div必须设置position: absolute/relative/fixed，否则Z-Index属性不会生效
• 初始Z-Index建议从一个适中的值（比如10）开始，避免和页面其他元素的层级冲突

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