web-dev-qa-db-ja.com

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

何かご意見は？

htmlcssangularflexboxangular-material
7
tilikoom

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>
6
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を使用してください。

幸運を祈ります。

1
JamesTheHunt