z-index to hide paragraph behind other elements

Question

I have a paragraph (.about-info p) that I am trying to hide behind another element (.about-container). I am trying to layer the elements so that .about-info p appears behind .about-container but have been unsuccessful so far using z-index.

Can you help me understand why? The site is here. Thanks for your ideas!

<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

the problem is that the body has background image and the about-container doesn't! thus it is transparent. so if you put a background-image (same as body) to the about-container it should be fixed

Answer 2

as you haven't posted your full code highlighting the problem, I'm going to assume you haven't added position:relative or position:absolute to .about-info p to make the z-index work.