html - 如何在React中让一个组件位于另一个组件之下？

这是我的反应代码。我有两个组件：BlackBox和SomeText。我希望黑匣子是全屏的，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>
        );
    }
}

这里是CSS代码，可以使BlackBox全屏显示：

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

为什么黑匣子会覆盖SomeText？

最佳答案

为什么黑匣子会覆盖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>

关于html - 如何在React中让一个组件位于另一个组件之下？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48998825/