I've come across multiple inquiries addressing this issue, yet none of them have provided a solution that fits my problem. In my scenario, there's a Parent component containing three Child components.
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;
Each child element consists of a basic div. The components have been styled as follows:
.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;
}
The desired outcome is for the React components to stack vertically, with the first child positioned at top: 100px; and the second one at top: 580px;
Given the need for responsive components, I require a flexible positioning approach.
However, the current issue is that ChildTwo ends up overlapping ChildOne.
Here, a potential solution is proposed, but I'm unsure how to implement it in my specific case. What would be the correct method to achieve the necessary positioning?