CSSアラインメント - 次のdivをカバー

Question

ページ上に2つのdivがあります - イメージとテキストです。画像は100％幅に設定されているため、テキストはその下に積み重なります。ポジションは設定されていません。

私は画像の上にタイトルを追加し、コンテナdivに相対位置を与え、画像とタイトルに絶対位置を与えました。

このため、画像の下にあるテキストがその背後に消えてしまいました。なぜ？！？！私はCSSを初めて学んだので、これらのアラインメントを理解することはできません。

CSS：ここ

.fullwidthimage { 
    width: 100%; 
    position: relative; 
    float: left; 
} 
.imageoverlay { 
    left: 0; 
    text-align: center; 
    position: absolute; 
    z-index: 100; 
    top: 50px; 
    width: 100%; 
    } 
    .imageundertext { 
     position: absolute; 
    } 

jsfiddle：https://jsfiddle.net/4ksbz4c2/

感謝。

Answer 1

あなたのCSSで "z-index"を使用してください。

画像が修正されている場合は、代わりに背景画像として設定します。

https://jsfiddle.net/4ksbz4c2/1/

.fullwidthimage { 
    height:100vh; 
    width:100vw; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:-1; 
    text-align:center; 
} 

.fullwidthimage img { 
    z-index:-1; 
    position:fixed; 
    top:0; 
    left:0; 
} 
.fullwidthimage h1 { 
    z-index:1; 
}