在背景上的DIV

Question

我想在Codepen上找到一個非常有趣的圖像網格背景。 唯一的問題是我在使用DIV時遇到了問題。

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

我已經嘗試過諸如top，z-index之類的事情，但是由於某些原因，我一直在努力使任何東西都位於圖像之上。

我嘗試過的例子

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