divの代わりに前のdivの下に行く

Question

私は簡単な解決策がありますが、私はそれを見つけることはできません問題に直面している。

私は2つのdivを持っています。最初のものは背景画像がぼやけてあり、内容は内部にあります。それは完璧に正常に動作します。しかし、最初のものを追いかけるのではなく、2番目のdivはその下に行きます。

<div class="section1"> 
    <!-- Content here --> 
</div> 
<div class="section2"> 
    <!-- Content here --> 
</div> 

そして、私のCSS：：私はデモのためにセクション1にマージントップを追加しました

.section1 { 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 0; 
    height: 100%; 
    margin-top: 100px; 
} 
.section1:before { 
    content: ""; 
    background: url('/images/background.jpg') center center; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: -1; 
    display: block; 
    filter: blur(5px); 
} 

.section2 { 
    padding: 50px 0; 
    display: flex; 
    flex-direction: row; 
    flex: 1; 
    background-color: #FF5D63; 
} 

は、ここに私のコードです。結果は下の画像に示されている：.section1が位置固定されているため

Answer 1

と.section2は、デフォルトでは、静的な位置を持っている、あなたはそれが上記行かせるために.section2上のインスタンスのrelative位置を指定する必要があります最初の値はデフォルトでz-indexの値を2にします。

See this fiddle

私はそれは、z-index値がカウントされる方法を説明SOためにこの答えを共有したい、それがうまく説明しています： https://stackoverflow.com/a/7490187/6028607