it-swarm.com.ru

Элементы Flex Flex, накладываемые друг на друга

Я пытаюсь поместить текст <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;
}

Какие-нибудь мысли?

4
justinnoor.io

Вы используете position: absolute в h1, который удаляет его из потока страницы и позиционирует его относительно его ближайшего расположенного родителя. Таким образом, другие элементы не будут течь вокруг него. Удалить это. Тогда ваши элементы будут отображаться бок о бок, так как по умолчанию flex-direction для гибкого родителя - 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>

4
Michael Coker

Я предполагаю, что это связано с тем, что у вас есть .top-h1 с position, установленным в absolute.

Создайте что-то вроде следующего, и это должно решить вашу проблему:

<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;
}

Это должно делать то, что вы хотите. Если я неправильно понял вопрос, пожалуйста, ответьте, и я могу скорректировать свой ответ, но это то, что я получаю от вас, желая, чтобы элементы не складывались, а форма находилась под h1, но оставалась по центру.

Для дальнейшего использования, если вам когда-либо понадобится выровнять div, укажите его ширину и затем используйте margin: auto;

Удачи.

1
JamesTheHunt