React中如何让组件置于另一组件下方？为何全屏组件会覆盖其他组件？

嘿，这个问题我可太熟了！你遇到的情况几乎肯定是因为给BlackBox设置的全屏CSS，导致它脱离了正常的文档流，或者布局逻辑没处理好，咱们一步步拆解：

核心原因分析 #

1. 绝对/固定定位让元素脱离文档流 #

如果你给BlackBox用了这类CSS实现全屏：

.black-box {
  position: absolute; /* 或者 fixed */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
}

那这个元素就会脱离正常的文档流——简单说就是页面布局时“看不到”它占据的空间，后面的SomeText会默认从页面顶部开始渲染，自然就被BlackBox完全盖住了。

2. 100vh高度的视觉误导 #

要是你用height: 100vh; width: 100%;来做全屏，有时候会因为body或html默认有margin/padding，导致BlackBox的实际高度超出视口，加上页面滚动的话，SomeText会被挤到视口外面，看起来像是被覆盖（其实是在BlackBox下方，滚动就能看到）。但如果是第一种定位的情况，就是真的覆盖，滚动也看不到。

解决方案 #

方案一：用Flex布局实现正常上下排列 #

给包裹两个组件的父容器设置Flex布局，强制BlackBox占满视口高度，SomeText自动排在下方：

React组件代码：

import React from 'react';

const BlackBox = () => <div className="black-box"></div>;
const SomeText = () => <div className="some-text">我是下方的文本内容</div>;

function App() {
  return (
    <div className="app-container">
      <BlackBox />
      <SomeText />
    </div>
  );
}

export default App;

对应的CSS：

/* 先重置默认样式，避免边距干扰 */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app-container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.black-box {
  height: 100vh; /* 占满视口高度 */
  width: 100%;
  background-color: black;
}

.some-text {
  padding: 2rem;
  font-size: 1.2rem;
}

方案二：如果必须用绝对定位 #

给父容器设置相对定位，同时给SomeText留出足够的顶部外边距，让它避开BlackBox的区域：

.app-container {
  position: relative;
  min-height: 100vh;
}

.black-box {
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left: 0 */
  background: black;
}

.some-text {
  margin-top: 100vh; /* 让文本从视口底部开始 */
  padding: 2rem;
}

这样就能保证SomeText出现在BlackBox的下方，不会被覆盖啦！

内容的提问来源于stack exchange，提问作者ThePumpkinMaster