Question

在IE7中所有具有“位置：相对”的div都重叠了我的一个Div，它具有“position：absolute”

代码：

<!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>

Answer 1

检查这个答案：

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

问题似乎是test1Div和test2Div位于相对定位的div内部，因此前面相对定位的div的z-index必须高于诉讼div。我添加了test3Div作为概念证明。

我对z-index并没有做很多事情，但我的猜测是IE处理它的位置div，而其他浏览器为所有元素（可能为0）提供默认z-index ，z-index被认为是反对的。不过不要引用我的话。

IE7中的问题是“位置：相对”

1 个答案: