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 是完全响应式的，它可以为您提供更多 absolute 定位的帮助；

Working Exmaple

Answer 2

好吧，我重新创建了您的代码，并且通过给出您提到的确切最高值，我能够将所有组件呈现在另一个之下。

我希望 React 组件能够相互渲染， 第一个孩子位于顶部：100px；第二个 置顶：580px；

但是，您在这篇文章中发布的 CSS 样式的“TOP”属性设置为 auto。

这是我的实时解决方案的副本： https://codesandbox.io/embed/sweet-dust-587oz

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

.childone {
  display: block;
  width: 100%;
  height: 480px;
  position: absolute;
  top: auto;//I changed this to top: 100px;
}

.childtwo {
  display: block;
  width: 100%;
  height: 240px;
  position: absolute;
  top: auto;//I changed this to top: 580px;
}

Answer 3

这是 CSS 的问题，而不是 React 的问题。您当前的 HTML 输出如下所示：

<div>
  <div class="header">header</div>
  <div class="childone">child one</div>
  <div class="childtwo">child two</div>
</div>

Childone 和 Childtwo 不是标题的子级（如果这是您想要实现的？），它们是 div 的子级。它们是绝对定位的，因此它们将朝向最近的相对定位的父对象。它们也具有相同的最高值（自动），因此它们是重叠的。将 childtwo 的最高值更改为480px，该框将出现在 chileone 之后。如果你想在你的标题后同时拥有两者，请将top: 100px 添加到 childone 并将top: 580px 添加到 childtwo（100px（标题高度）+ 480px（childone 高度））

为了让所发生的事情更加明显，请将border: 1px solid red 添加到您的元素中