Проблема в IE7, имеющая «позиция: родственник» - PullRequest
Новая
       4

Проблема в IE7, имеющая «позиция: родственник»

0 голосов
/ 20 июля 2011

в IE7 все дивы, имеющие «положение: относительное», перекрывают один мой див, который имеет «положение: абсолютное»

Код: 

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

1 Ответ

1 голос
/ 20 июля 2011

Проверьте этот ответ:

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

Проблема состоит в том, что test1Div и test2Div находятся внутри относительно позиционированного div, поэтому предыдущие относительнопозиционированный div должен иметь z-индекс выше, чем исходящий div.Я добавил test3Div в качестве подтверждения концепции.

Я не слишком много работаю с z-index, но я предполагаю, что IE обрабатывает его для каждого позиционированного div, в то время как другие браузеры дают значение по умолчанию z-index ко всем элементам (вероятно, 0), и z-index считается против этого.Не цитируйте меня об этом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...