在React中如何让一个组件位于另一个组件“下方”？

Question

在React中如何让一个组件位于另一个组件“下方”？

8

以下是我的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;
}

为什么黑匣子覆盖了一些文本？

- ThePumpkinMaster

2个回答

0

因为BlackBox是绝对的。不要为两个组件指定位置。这对我有用。此外，尝试另一个选项以全屏显示。

- Mahtab3849

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim S. · Accepted Answer

为什么黑色盒子会覆盖SomeText文本？

因为黑色盒子是绝对定位的，而我可以假设 SomeText 不是。

将 #blackbox 的位置设为相对定位。您很可能会遇到将其设置为全高度的问题。这很容易解决，但需要对页面上其他 HTML 元素进行一些样式处理。例如，请查看此内容：https://dev59.com/oW855IYBdhLWcg3wGQTY#4550198

或者只需执行以下操作：

#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>