html - z-index 将段落隐藏在其他元素后面

Question

我有一个段落 (.about-info p)，我试图隐藏在另一个元素 (.about-container) 后面。我正在尝试对元素进行分层，以便 .about-info p 出现在 .about-container 后面，但到目前为止使用 z-index。

你能帮我理解为什么吗？ site is here .感谢您的想法!

<div class="about-info">
   <p>stuff</p>
</div>

<div class="about-container">
   More stuff
</div>

.about-container { z-index:9999; position:relative; }
.about-info { background-color: #d7d7d7; z-index:-700; position:relative; }
.about-info p { z-index: -800; position:relative;}

Answer 1

问题是 body 有背景图片而 about-container 没有!因此它是透明的。因此，如果您将背景图像(与正文相同)放入 about-container，它应该被修复