javascript - 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如果我正确理解您的查询，就会从您那里 fork 。关键部分是这些(尽管我添加了一些额外的可见性):

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