Using z-index in a table cell to write over an image - html

Question

I want to place text on top of an image that I placed in a table cell.
I tried to use the z-index but the text keeps appearing under the image.
I created a class called p1 that positioned the image relative(not sure how I should handle this inside of a table) and the z-index -1.
I then added the class id in the table cell tag.
What I have so far:
.font1 {
font-family: Verdana, Geneva, sans-serif;
font-size: small;
text-align: left;
}
.hangingindent {
padding-left: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
}
.hangingindent2 {
padding-left: 75px;
}
.p1 {
position: relative;
z-index: -1;
}
.backbox {
z-index: -1;
position: relative;
left: 0;
right: 0;
botton: 0;
}
.text {
z-index 100;
color: #0000000;
font-size: 14px;
position: absolute;
top: 100px;
right: 200px;
overflow: hidden;
}
<table width="1013" border="0" align="center" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/images2/header.gif" width="1013" height="642" />
</td>
</tr>
<tr>
<td colspan="5">
<img src="images/images2/menu-grid.gif" width="1013" height="232" />
</td>
</tr>
<tr>
<td width="55"> </td>
<td width="231">
<img src="images/images2/solutions.jpg" width="204" height="46" />
</td>
<td width="233">
<img src="images/images2/capabilities.jpg" width="204" height="46" />
</td>
<td width="232">
<img src="images/images2/art services.jpg" width="204" height="46" />
</td>
<td width="254">
<img src="images/images2/contact us.jpg" width="204" height="46" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent2">
<img src="images/images2/WELCOME.gif" width="500" height="100" />
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5" class="hangingindent">
<p>Since 1968, Packaging Products Corporation (PPC) has been a leader in the flexographic printing and converting industry.
<br />Our focus on emerging technologies in film substrates, ink systems, and controlled atmosphere packaging, enables us to
<br />provide the highest quality products at the most competitive prices.</p>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5">
<div class="backbox">
<img src="images/images2/bottom2.gif" width="1013" height="810" />
<div class="text">This is a test to see where the text will land</div>
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>

Answer 1

As I got from your question is you want to put text over an image. So to do it, there is no need to use z-index. you can do it by setting absolute position of p tag and make td tag as position relative.
demo for it is you can use the link
<table>
<tr>
<td>
<p>Hello</p>
<img src="http://www.freakypic.in/wp-content/uploads/2014/08/flower-images.jpg" />
</td>
</tr>
</table>
CSS:
img {
width:200px;
}
td {
border:2px solid red;
position:relative;
}
p {
position:absolute;
color:yellow;
font-size:30px;
top:0px;
left:70px;
}

Answer 2

You can change the markup little bit.!Z-index will work with position set to other than static (which is default).
Here, you can remove the <img> tag & display the image as background image.
Other solution wrap the text in <p> or <div> & make it position: absolute & immediate parent <td> as position:relative (This is mentioned earlier already)
little code explanation
exp1 -- background-image
td {
background-image: url("");
background-position: left top fixed;
}
exp1 - HTML markup
<td>Data to be there on top of the image</td>
Please check this link! - JSFIDDLE