如何解决右侧Toolbar修改Preferences时ToastBar被Form遮挡的问题

这个问题是层叠上下文优先级导致的UI遮挡问题，可通过以下几种方法解决，按生效优先级从高到低排序：

• 调整ToastBar的z-index属性
  首先确保ToastBar的position属性不为默认的static（设为fixed/absolute/relative均可），给ToastBar添加足够高的z-index值即可：

  .toast-bar {
    position: fixed;
    z-index: 9999; /* 数值需高于右侧Toolbar Form的z-index值 */
  }
  

• 组件库原生配置修改
  如果你使用的是前端组件库内置的Toast/Message提示组件，可直接通过全局配置修改提示的层级：

  // Ant Design 示例
  import { message } from 'antd';
  message.config({
    zIndex: 9999
  });
  
  // Element UI 示例
  this.$message({
    message: '设置修改成功',
    zIndex: 9999
  });
  

• 调整ToastBar的DOM挂载位置
  如果给Toast设置高z-index后仍被遮挡，说明Toast的父容器触发了独立层叠上下文，导致子元素z-index无法突破父容器层级限制。此时将ToastBar的DOM节点挂载到document.body根节点下即可：

  // Ant Design 配置挂载节点示例
  message.config({
    getContainer: () => document.body
  });
  
  // 自定义Toast挂载示例
  const toastNode = document.createElement('div');
  document.body.appendChild(toastNode);
  // 将Toast组件渲染到toastNode中即可
  

如果修改后仍不生效，可通过浏览器开发者工具的元素检查面板，分别查看右侧Toolbar Form和ToastBar的实际z-index数值，以及两者的父容器是否设置了transform、opacity < 1、will-change等会触发独立层叠上下文的属性，对应调整即可。

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