How do you apply z-index on parallax image - css

Question

I am trying to overlap my survey form over a parallax image (creating using MateralizeCss) using Z-index. However, my form still remains under the image. Please help! *Cant provide my codes as it is in xslt. Any simple example will be appreciated.
This is the html code
<div class="parallax-container">
<div class="parallax">
<img src="http://materializecss.com/images/parallax1.jpg" />
</div>
</div>
<div style="width:50%;margin: 0 auto ;z-index:1000;background-color:white;padding:2.5%; box-shadow: 0px 4px 5px gray,
-5px 4px 7px gray, 5px 4px 7px gray;margin-bottom:5%;position:absolute">
<div style="font-size:250%;font-weight:bold">In Store Hub Trooper Feedback Form</div>
<div style="font-size:150%;">Q number</div>
<div>
<input type="number" required="required" />
</div>
<div style="font-size:150%;">Dateeeeeeeeeeeeee</div>
<div id="input">
<input type="date" class="datepicker" required="required">
</input>
<span>
</span>
</div>

Answer 1

Both the form and the image will need a position property.
HTML
<form id="myform" class="overlap">
<button id="button" name="button">A button</button>
<br/>
<input type="submit" value="submit">
</form>
<div class="box">
Thing overlapping with form
</div>
CSS
.overlap {
position: relative;
margin: 0 auto;
background-color: #ccc;
padding: 3em;
width: 50%;
}
.box {
position: absolute;
top: 6em;
right: 20%;
background-color: #666;
color: #fff;
padding: 3em;
width: 25%;
}
I made you a CodePen:
See the Pen Overlapping things with z-index by Yvonne Aburrow (#vogelbeere) on CodePen.
EDIT: I added my answer before you updated the question with your code.