CSS Flexの積み重ねアイテムが互いに重なり合います

Question

<h1></h1>のテキストと角度のある素材からのメールフォームを、背景色付きの<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

h1で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>

Answer 2

私は、これはあなたがabsoluteにpositionセットで.top-h1を持っているという事実によるものである想像。

は、次のようなものを作成し、それはあなたの問題を整理する必要があります

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

幸運のベスト。