Почему z-index не работает?

Я пишу веб-приложение, и у меня возникают проблемы с одной частью, где у меня есть опрокидывание, но в настоящее время она работает. EDIT: pastehtml был отклонен, здесь jfiddle: http://jsfiddle.net/XmKwt/1/Почему z-index не работает?

Правый div находится под левым div, хотя индекс z говорит, что он не должен.

Я обнаружил, что если «позиция: относительная»; css удаляется (см. источник), тогда он работает отлично, но я не понимаю, почему и мне нужно «position: relative»; css там по другим причинам, не продемонстрированным в этом упрощенном примере.

<!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> 
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <style> 
    /* Remove this line and it works */ 

    #featureleft {position:relative;} 

    /* End */ 

    #layoutdiv { text-align: left; width: 940px; } 
    #featureleft { width: 580px; float: left;z-index:10; background:red; } 
    #featureright { float: right; z-index:100;} 
    #copypaste { background-color: #bbb; margin-bottom: 40px; padding-right: 10px; padding-left: 10px; width: 300px; height:200px; margin-left: 20px; border: solid 5px #000; } 
    </style> 

    <script language='javascript'> 
    $(document).ready(function() { 
     $('#copypaste').mouseenter(function(){ 
      p=$(this).position(); 
      // increase/move by p.left 
      move=Math.round(p.left)-0; 
      width=parseInt($(this).css('width'))+parseInt(move); 
      margin=0-(parseInt(move)-20); 
      inputs=parseInt(move)+280; 
      $(this).css('width',width+'px').css('margin-left',margin+'px').css('height',$(this).height); 
     }); 

     $('#copypaste').mouseleave(function(){ 
      $(this).css('width','300px'); 
      $(this).css('margin-left','20px'); 
     }); 
    }); 
</script> 
</head> 

<body> 
    <div id="layoutdiv" class='container fakewindowcontain'> 
     <div id='featurewrapper'> 
      <div id='featureleft'> 
       <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p> 
      </div> 

      <div id='featureright'> 
       <div id='copypaste'> 
       <p>Lorem ipsum dolor sit amet, ut eget et enim, nec auctor habitasse eu mattis eget odio, lacinia vivamus libero dictum, tempor nunc nec nam fringilla mauris, et class dolor curabitur ipsum. Commodo ultricies id</p> 
       </div>  
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2012-05-02 Ben Holness

высокого риска Сайт Blocked Расположение: pastehtml.com/view/bwqlq812t.html доступ был заблокирован, как угроза Mal/HTMLGen-A был найден на этом веб-сайте. –

Ваша ссылка pastehtml не работает. Для чего это стоит, свойство z-index CSS игнорируется на элементах, которые не имеют позиции, отличной от статической (по умолчанию). – Adam

Ваша ссылка также не работает для меня. Вы должны попробовать http://jsfiddle.net. –

#featureright DIV не имеет позицию объявленной (и, таким образом, она является такой же, как положение: статический). Как я уже сказал в своем комментарии

«СМЧ г-индекс свойство игнорируется на элементах, которые не имеют положение, кроме статической (по умолчанию)»

Поэтому, чтобы получить его подчиняться свойству г-индекс, необходимо добавить позицию: по отношению к #featureright

источник

2012-05-02 17:27:21 Adam

EDIT: Но если вы добавите позицию: относительная, вы - функция mouseenter, не работает, если вы не измените p = $ (this) .position() на p = $ (this) .offset() ... но в любом случае это много грязного кода ... – Adam

добавление позиции: относительно #featureright останавливает опрокидывание от работы. Думаю, мне нужно найти другой способ сделать это. –

Просто добавьте 'position: relative' и' z-index: 100' в '# copypaste' вместо' # featureright' –

Почему z-index не работает?

ответ

Смежные вопросы