CSS Flex Stacking Items on Top of Each Other [duplicate] - html

Question

This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I'm trying to place some <h1></h1> text, and an email form from Angular Material, into the center of a <div></div> section that has a colored background. The items are coming out stacked on top of each other, as if they were layers. The email form needs to be underneath the <h1></h1> tags. The only way I could get this to align properly was with position:flex, which I suspect is the underlying cause.
Here's my html and css:
<div class="top-section">
<h1 class="top-h1">
mytitle
</h1>
<md-input-container class="email-form" color="accent">
<input mdInput placeholder="Email us" value="Your email address">
</md-input-container>
</div>
.top-section {
height: 350px;
background-color: #04041b;
align-items: center;
display: flex;
justify-content: center;
}
.top-h1 {
color: #E8E8E8;
font-size: 60px;
position: absolute;
}
.email-form {
color: white;
font-size: 30px;
}
Any thoughts?

Answer 1

You're using position: absolute on the h1 which removes it from the flow of the page, and positions it relative to it's closest positioned parent. So other elements won't flow around it. Remove that. Then your items will display side-by-side since the default flex-direction for a flex parent is row. To display the items vertically, use flex-direction: column and the items will stack on top of one another in a column instead of side-by-side in a row.
.top-section {
height: 350px;
background-color: #04041b;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.top-h1 {
color: #E8E8E8;
font-size: 60px;
}
.email-form {
color: white;
font-size: 30px;
}
<div class="top-section">
<h1 class="top-h1">
mytitle
</h1>
<md-input-container class="email-form" color="accent">
<input mdInput placeholder="Email us" value="Your email address">
</md-input-container>
</div>

Answer 2

I would imagine this is due to the fact that you have .top-h1 with the position set to absolute.
Create something like the following and it should sort out your issue:
<div class="container">
<h1>Example</h1>
<div class="form">
<!-- ignore this div, this is an example of where your form will be. -->
</div>
</div>
.container {
height: 350px;
background-color: #E0E0E0;
width: 100%;
margin: auto;
text-align: center;
}
.form {
width: 100%;
margin: auto;
}
This should do what you want. If I have misunderstood the question please reply and I can adjust my response but this is what I get from you wanting the elements not to stack and for the form to be located under the h1 but remain centred.
For future reference, if you ever need to align a div, give it a width and then use margin: auto;
Best of luck.