如何让React中的另一个组件“低于”另一个组件？

Question

这是我的React代码。我有两个组件：BlackBox和SomeText。我希望BlackBox全屏，SomeText低于它。我假设连续的两个div将按顺序呈现（彼此相邻或彼此相邻，但本例中的BlackBox完全位于SomeText之上）。

class BlackBox extends React.Component {
    render() {
        return (<div id="blackbox"></div>);
    }
}

class SomeText extends React.Component {
    render() {
        return(<div id="sometext">Hello</div>);
    }
}

class App extends React.Component {
    render() {
        return(
            <div>
                <BlackBox/>
                <SomeText/>
            </div>
        );
    }
}

以下是使BlackBox全屏显示的CSS代码：

#blackbox {
    background-color: #00000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

为什么BlackBox会覆盖SomeText？