如何在 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？

Answer 1

为什么 BlackBox 会覆盖 SomeText？

因为它是绝对定位的。而且，据我所知，SomeText 不是。

使#blackbox 位置相对。您很可能会遇到使其全高的问题。这很容易解决，但需要对页面上的其他 html 元素进行一些样式设置。看看这个例子：https://stackoverflow.com/a/4550198/7492660

或者只是这样做：

#block1{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 0;
}

#block2{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #ff4444;
  padding: 3px 8px;
  color: #fff;
  z-index: 1;
}

<div id="block1"></div>
<div id="block2">Some Text</div>