CSS Flex相互堆叠的项目

Question

我正在尝试将一些<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;
}

有什么想法吗？

Answer 1

您在上使用，将其从页面流中删除，并将其相对于最接近父对象position: absolute放置h1。因此，其他元素将不会围绕它流动。删除它。然后，您的项目将并排显示，因为flex-directionflex parent 的默认值为row。要垂直显示项目，请使用flex-direction: column，并且项目将以一列的形式堆叠在一起，而不是并排堆叠。

.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>