CSS父元素设置transform时如何让position: fixed子元素全屏显示

可行解决方案 #

核心问题是父元素设置transform属性后，会成为其内部fixed定位元素的包含块，导致fixed不再参照视口定位，下面是两种可落地的解决方法：

方案1：将弹窗DOM转移到body根节点（优先推荐） #

只要把弹窗元素移出带transform属性的父容器，直接挂载到body下，fixed定位就会恢复正常参照视口，适配所有场景，改造成本最低。

修改后的JS代码如下，同时优化了原有重复绑定关闭事件的问题：

// 页面加载完成后先把弹窗移到body根节点
$('body').append($('.pop'));

$('.btn').on('click', function() {
  $('.pop').toggle();
})

$('.close').on('click', function() {
  $('.pop').hide();
});

如果业务要求弹窗关闭后回到原DOM位置，可以在关闭时调用$('.wrap').append($('.pop'))放回原位置即可。

方案2：抵消父元素的transform偏移 #

如果无法调整DOM结构，可以通过给弹窗加反向偏移抵消父元素transform的影响，适合父元素transform固定的场景。
针对你的Demo，只需要修改.pop的CSS即可：

.pop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* 反向抵消父元素translate(20%, 20%)的偏移 */
  transform: translate(-20%, -20%);
  background-color: rgba(255, 255, 255, 0.95);
  display: none;
}

如果父元素的transform是动态变化的，可以通过getBoundingClientRect()实时获取父元素相对于视口的偏移，动态计算反向偏移值赋值给弹窗的transform属性即可。

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