React子组件定位重叠问题

Question

我已经看到了有关此问题的几个问题，但没有一个问题可以帮助我解决我的问题。我有一个父组件和三个子组件。

import React, { Component } from 'react'

import Header from "./Header";
import ChildOne from "./ChildOne"
import ChildTwo from "./ChildTwo"

class Parent extends Component {
  render() {
    return (
      <div>
        <Header />
        <ChildOne />
        <ChildTwo />
      </div>
    )
  }
}

export default Parent;

每个子组件都包含一个简单的div. 我已将以下样式应用于组件：

.header {
  position: relative;
  width: 100%;
  height: 100px;
}

.childone {
  width: 100%;
  height: 480px;
  position: absolute;
  top: auto;
}

.childtwo {
  width: 100%;
  height: 240px;
  position: absolute;
  top: auto;
}

我希望 React 组件在彼此下方渲染一个，第一个子组件定位top: 100px;，第二个子组件定位top: 580px;

由于我正在构建响应式组件，因此我需要灵活的定位。

相反，发生的情况是 ChildTwo 与 ChildOne 重叠。

这里建议了一个可能的答案，但是，我不明白如何将该解决方案应用于我的案例。实现所需定位的正确方法是什么？

Answer 1

您不必使用绝对定位来做到这一点。

使用flexboxcss 属性：这里有完整指南

将类添加flex到您的包装 div 并使用 css 对其进行分配：

.flex {
  display: flex;
  flex-direction: column;
}

现在您可以top从所有子组件中删除：属性。

请注意，这flexbox是完全响应式的，它可以帮助您更好地absolute定位；

工作示例