<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.square
{
width: 200px;
height:200px;
background-color:#F99;
}
#myimage {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.table
{
position:relative;
margin-top:80px;
}
</style>
<script>
cc=1;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="images/white_contact.png";
}
else if (cc==1)
{
cc=2;
document.getElementById('myimage').src="images/yellow_contact.png";
}
else if (cc==2)
{
cc=3;
document.getElementById('myimage').src="images/red_contact.png";
}
else
{
cc=0;
document.getElementById('myimage').src="images/green_contact.png";
}
}
</script>
</head>
<body>
<div class = "square">
<table border="0" class = "table" ><tr>
<td width="51">Name:</td>
<td width="141"><input type="text" size="10"></td>
</tr>
<tr>
<td>Title:</td>
<td><input type="text" size="10"></td>
</tr>
<tr>
<td>Contact:</td>
<td><input type="text" size="10"></td>
</tr>
</table>
</div>
<img id="myimage" onclick="changeimage()" border="0" src="images/white_contact.png" width="70" />
<p>Click to turn on/off the light</p>
</body>
</html>
I am facing an issue with positioning my table at the bottom of the pink box, it keeps getting blocked by the image. I have tried adjusting my CSS but it still stays at the top. What should I do? Can someone help me?