在背景上的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;
}