整个页面上的图层无法正确显示

Question

我的react应用程序中有问题。我正在使用styled-components来使用样式（CSS-in-JS）。

问题： 当用户执行特定操作时，应显示整个页面上的图层。为此，我创建了一个单独的组件。但是该图层未按预期工作（请参见图像）。第1层应覆盖整个页面。第2层应该在页面的中间。

请参阅我的组件代码：

import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import axios from 'axios';
const uuidv4 = require('uuid/v4');

const RefreshLink = styled.a`
    text-decoration: underline;
    cursor: pointer;
    color: #155724;

    &:hover {
        color: #155724;
    }
`

const Background = styled.div`
    position:fixed;
    width:100%;
    height:100%;
    background-color:#aeaeae;
    opacity:0.5;
    z-index:10000;
`

const PopUp = styled.div`
    position:fixed;
    z-index:10001;
    left:50%;
    margin-left:-25%;
    width:450px;
    top:50%;
    margin-top:-25%;
`

class UpdatingFreightsInfo extends Component {
    _isMounted = false;
    signal = axios.CancelToken.source();

    constructor(props) {
        super(props);
        this.state = { 
            freightsInUpdateProcess: false,
            hasFreightsBeenInUpdateStatusSincePageLoad: false,
            intervalId: -1,
            freightsUpdating: [],
        };

        this.checkForUpdatingFreights = this.checkForUpdatingFreights.bind(this);
    }

    componentDidMount() {
        this._isMounted = true;
        this.getUpdatingFreightsInfo();
    }

    componentWillUnmount() {
        this.signal.cancel();
        clearInterval(this.state.intervalId);
        this._isMounted = false;
    }

    componentDidUpdate(prevProps) {
        if (this.props.updateTrigger !== prevProps.updateTrigger) {
          this.checkForUpdatingFreights();
        }
      }

    getUpdatingFreightsInfo() {
        this.checkForUpdatingFreights();
        let intervalId  = setInterval(() => {
            this.checkForUpdatingFreights();
        },30000);
        this.setState({
            intervalId: intervalId
        });
    }   

    checkForUpdatingFreights = async () => {
        try {
            const response = await axios.get('../data/get/json/freightsCurrentlyUpdating', {
                cancelToken: this.signal.token,
            })
            .then((response) => {
                console.log(response);
                if(response != undefined && response != null) {
                    if (this._isMounted) {
                        if(response.data.length > 0) {
                            this.setState({
                                freightsUpdating: response.data,
                                freightsInUpdateProcess: true,
                                hasFreightsBeenInUpdateStatusSincePageLoad: true,
                            });
                        }
                        else {
                            this.setState({
                                freightsUpdating: [],
                                freightsInUpdateProcess: false,
                            });
                        }
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        }
        catch(err) {
            if (axios.isCancel(err)) {
                console.log('Error: ', err.message); // => prints: Api is being canceled
            } else {
            }
        }
    }

    render() {
    return (
            (this.state.freightsInUpdateProcess || (this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess )) && 
            <Fragment>
                <Background key={uuidv4()}></Background>
                <PopUp key={uuidv4()}>
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-12 col-sm-12 col-md-12 col-lg-12">
                                {
                                    this.state.freightsInUpdateProcess && 
                                    <div className="alert alert-warning text-center" role="alert">
                                        <h4 className="alert-heading">Updating freights in process</h4>
                                        <p className="mb-0">{ this.state.freightsUpdating.length } freight entries are currently being updated.</p>
                                    </div>
                                }
                                {
                                    this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess && 
                                    <div className="alert alert-success text-center" role="alert">
                                        <h4 className="alert-heading">Updating freights finished</h4>
                                        <p className="mb-0">
                                            The update process has been finished.
                                            <br />
                                            <span className="fa fa-refresh"></span> <RefreshLink href="/" target="_self">Please refresh the page</RefreshLink>
                                        </p>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </PopUp>
            </Fragment>
    );
  }
}

export default UpdatingFreightsInfo;

是因为该组件嵌套在其他组件中吗？好像是这样，但是我想，当使用CSS时

position: fixed与left和top的组合

该代码独立于组件。同样奇怪的是，在PopUp中，它似乎（几乎）可以正常工作。