css - 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 重叠。

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

Answer 1

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

使用 flexbox css 属性:Complete Guide Here

将 flex 类添加到包装器 div 并使用 css 分配它:

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

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

请注意，flexbox 是完全响应式的，它可以帮助您进行更多绝对 定位；

Working Exmaple