My query is : please have a look at the attachment . when i click on Sign in link the popup window open but it goes behind the image . I want it to come above image so user can enter the user name and password . Can anyone please help




<HTML>

<HEAD>

<style type="text/css">

.labelmargin{
margin-left:7px;}

.toppadding{padding-top:10px;}


.imgsignin{background:url(../image/headingbaner.gif) repeat-x;font-size:14px;padding:3px;font-weight:bold;color:white;overflow:visible; width:630px;}

.fontofsignin{font-size:12px;}

</style>

</HEAD>

<BODY>

<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onClick="document.getElementById('PopUp').style.display = 'block' " ><span style="text-decoration: underline;">Sign In</span></a>

<div id='PopUp' style='display: none; position: absolute; left: 370px; top: 350px; border: solid black 1px; padding: 0px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 635px; height:200px;'>

<div class="imgsignin"><b>Developer's Gallery</b></div>


<div class="toppadding"></div>
<form ">
<label class="labelmargin fontofsignin">User Name</label><input name="login" type="text" class="leftmargin"/><div class="toppadding"></div>

<label class="labelmargin fontofsignin">Password </label><input name="password" type="password" class="leftmargin1"/><div class="toppadding"></div>

<div class="labelmargin"><a href="registration.php.htm"> New User </a> &nbsp;| <a href=""> Forgot Password </a></div>

<div class="toppadding"></div>
<div class="labelmargin" align="left"><input name="Ok" type="button" value="Login" />
<input name="Cancel" type="button" value="Cancel" onClick="document.getElementById('PopUp').style.display = 'none' "/>


</div>
</form>