Issue in IE7 having "position : relative"

in IE7 all the divs having "position : relative" are overlapping my one Div which is having "position : absolute"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#test1').focus(function(){
      $('#test1Div').slideDown();
  }); 
  $('#test1').blur(function(){
  $('#test1Div').slideUp();
 });

 $('#test2').focus(function(){
      $('#test2Div').slideDown();
  }); 
  $('#test2').blur(function(){
  $('#test2Div').slideUp();
 });

});

</script>
</head>

<body>
<table width="50%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="17%" align="right">test 1</td>
    <td width="83%"><div style="position:relative"><input name="" id="test1" type="text" />
    <div id="test1Div" style="position:absolute; z-index:1; width:100px; background:#CCC; display:none; top:5px; left:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div></td>
  </tr>
  <tr>
    <td align="right">test 2</td>
    <td><div style="position:relative"><input name="input" id="test2" type="text" />
     <div id="test2Div" style="position:absolute; width:100px; background:#CCC; display:none; top:5px; left:0px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    </div></td>
  </tr>

</table>

</body>
</html>

Solution

Check this answer out:

http://jsfiddle.net/hkLFA/6/

The problem appears to be that the test1Div and test2Div are inside of the relatively positioned div so the preceding relatively positioned div must have a z-index higher than the proceeding div. I added test3Div as a proof of concept.

I don't do a lot with z-index, but my speculation is that IE handles it per positioned div while other browsers give a default z-index to all elements (probably 0), and the z-index is considered against that. Don't quote me on that though.