DIVの上に背景

Question

私はCodepenの非常に興味深い画像のグリッドの背景を見つけました。 私はそれの上にDIVを得ることに問題が発生しているだけです。

https://codepen.io/pirolab/pen/qmeNqY

私は、このようなトップ、Zインデックスとして物事を試してみたが、何らかの理由で私は、画像の上になるように何かを得るのに苦労しています。私は、誰かが助けることができる場合、私はそれを本当に感謝し

<section class="o-hero"> 
    <div class="o-cards__main"> 
    <div style="z-index:999;top:5;background:blue">Hello<div> 
    <div class="o-cards__container" id="container"> 
    </div> 
    </div> 
</section> 

を試してみた何かの

例。

Answer 1

https://codepen.io/andrasadam93/pen/KyNvoe私はあなたの質問を正しく理解しています。キー部分は、これらの（私は、視認性のために、いくつかの余分なを追加しましたが）されています

<section class="o-hero"> 
    <div class="overlay"> 
    <p>This is overlay</p> 
    </div> 
    <div class="o-cards__main"> 
    <div class="o-cards__container" id="container"></div> 
    </div> 
</section> 


.overlay{ 
    position:absolute; 
    z-index:999; 
    width: 100%; 
    height: 100%; 
    font-size: 24px; 
    font-weight:700; 
    color:#ff0000; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}