Question

我在Codepen上发现了一个非常有趣的图像网格背景，我想使用它。唯一的问题是我遇到了将DIV置于其上的问题。

我尝试过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;
}

DIV位于背景之上

1 个答案: