<分区>
我正在尝试放置一些 <h1></h1>文本和来自 Angular Material 的电子邮件表单，放在 <div></div> 的中心具有彩色背景的部分。这些元素堆叠在一起，就像它们是层一样。电子邮件表格需要位于 <h1></h1> 下方标签。我能让它正确对齐的唯一方法是使用 position:flex ，我怀疑这是根本原因。
这是我的 html 和 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;
}
有什么想法吗？