jQuery Alert与FancyBox层级堆叠问题：如何让Alert置于Overlay之上？

这个问题我碰到过好多次，核心原因真不是你设置的z-index不够高——而是jQuery Alert的DOM元素被嵌套在某个z-index更低的父容器里了。z-index的生效是基于「堆叠上下文」的：如果父容器的堆叠层级比FancyBox的overlay低，哪怕子元素设了9999999的z-index，也没法突破父容器的限制，自然会被overlay挡住。

给你几个具体的解决步骤：

• 第一步：检查Alert的DOM嵌套结构
  打开浏览器开发者工具（按F12），找到Alert对应的元素，顺着父级往上看，有没有哪个父容器设置了position: relative/absolute/fixed且z-index值低于FancyBox的overlay（FancyBox默认overlay的z-index一般是9999左右）。如果发现Alert是嵌套在这类容器里，那问题就出在这。

• 第二步：把Alert挂载到body直接子节点下
  这是最直接的解决方案，让Alert的堆叠上下文直接基于body，摆脱父容器的限制：

  • 如果用的是jQuery Alert插件，初始化时指定appendTo选项：

    $.alert({
      title: "操作提示",
      content: "你的提示内容",
      appendTo: "body" // 直接将alert挂载到body下
    });
    

  • 如果是自定义的Alert组件，手动移动DOM：

    // 假设你的Alert元素ID是#customAlert
    $("#customAlert").appendTo("body").css({
      position: "fixed", // 必须设置定位，z-index才生效
      zIndex: 100000, // 只要比FancyBox overlay的z-index高就行，不用太夸张
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)" // 居中定位
    });
    

• 第三步：确认z-index的生效条件
  别忘了，z-index只对设置了position: relative/absolute/fixed/sticky的元素生效，所以一定要给Alert加上定位属性，不然再高的z-index也没用。

• 额外排查点
  检查FancyBox的overlay有没有设置transform、filter这类属性——这些属性会创建新的堆叠上下文，哪怕你把Alert移到body下，也可能被影响。如果有的话，需要调整FancyBox的overlay样式，去掉这些会干扰堆叠上下文的属性。

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