全屏覆盖问题答案

【问题标题】：Full screen Overlay issue全屏覆盖问题
【发布时间】：2019-01-05 06:16:05
【问题描述】：

我试图在显示进度条时覆盖屏幕，但覆盖不正确，几个 DIV 仍然突出显示，如图所示。

我使用以下 CSS 样式，请提出问题的原因

style = {
 qoverlay: {
      position: 'absolute',
      top: '0',
      left: '0',
      background: 'rgba(0,0,0,0.6)',
      'z-index': '50',
      width: '100%',
      height: '100%'
    }
}

我正在使用material-ui/core/Dialog

<Dialog open={this.state.confirmOpen} aria-labelledby='form-dialog-title' style={this.style.qoverlay}>

【问题讨论】：

标签： css

【解决方案1】：

您可能需要增加z-index 的值。尝试将其从 50 更改为 99999。或者检查仍然可见的元素的z-index 值，并为您的叠加层使用更高的数字。

【讨论】：

【解决方案2】：

标记位置已修复，这将解决您的问题。绝对值相对于标记为相对的第一个父对象定位。

【讨论】：

还是同样的问题，qoverlay: { position: 'fixed', top: '0', left: '0', background: 'rgba(0,0,0,0.6)', zIndex：50，宽度：'100%'，高度：'100%' }