Bootstrap卡片hover的transform效果导致Modal异常的原因排查

• 堆叠上下文干扰层级：给.card:hover添加transform: translateY(-5px)时，卡片元素会创建一个新的堆叠上下文。Bootstrap Modal的遮罩（backdrop）和弹窗本身靠z-index控制全局层级，但一旦卡片拥有独立堆叠上下文，Modal的层级会被限制在这个上下文内部，导致弹窗要么被卡片遮挡，要么在卡片区域内异常渲染，出现闪烁现象。

• 位移引发事件冲突：hover时卡片向上位移，触发Modal的按钮位置也随之偏移。浏览器事件队列会因此混乱——比如刚点击按钮，卡片位移让鼠标瞬间离开按钮，触发mouseout事件，直接中断Modal的显示逻辑，就会出现“短暂显示后消失”的情况。就算用JS临时禁用transform，位移发生的瞬间还是会触发事件冲突，没法彻底解决问题。

• Modal渲染范围被限制：Bootstrap Modal默认会插入到<body>最末尾，确保全屏覆盖。但当卡片通过transform创建堆叠上下文后，Modal会被“困”在卡片的上下文范围内，只能在卡片区域内显示，而非全局全屏覆盖，这就导致了视觉上的异常表现。

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