Pourquoi zIndex ne fonctionne pas à partir de IE/Javascript?

<!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" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=7" /> 
     <title>Problem demo</title> 
    </head> 
    <body> 
     <div style="background:red; position:relative;" id='div1'>1. 
      <div style="background:lime; position: absolute; width: 300px;height: 300px; top: 3px; left: 30px" id="div3">3.</div> 
     </div> 
     <div style="background:blue;position:relative;color: white" id="div2">2.</div> 
     <script type="text/javascript">/*<![CDATA[*/ 
      window.onload= function() 
      { 
       // The container of the absolute DIV 
       document.getElementById('div1').style.zIndex = 800; 

       // The lowest DIV of all which obscures the absolute DIV 
       document.getElementById('div2').style.zIndex = 1; 

       // The absolute DIV 
       document.getElementById('div3').style.zIndex = 1000; 
      } 
     /*]]>*/</script> 
    </body> 
</html>

ce script a deux DIV éléments avec position:relative et le premier d'entre eux a en un mot, un troisième DIV avec position:absolute en elle. Tout est configuré pour fonctionner en mode standard IE-7 (je cible IE7 et plus).Pourquoi zIndex ne fonctionne pas à partir de IE/Javascript?

Je connais les piles z séparées de IE, donc par défaut le troisième DIV devrait être sous le second DIV. Pour résoudre ce problème, il y a un peu de Javascript qui définit les ordres z des premier et troisième DIV à 1000, et l'ordre z de la seconde DIV à 999.

Malheureusement, cela n'a pas aidé. Si les index z étaient définis dans le balisage, cela fonctionnerait, mais pourquoi pas de JS?

Remarque: Ce problème n'existe pas en mode standard IE8, mais je cible IE7, donc je ne peux pas me fier à cela. Aussi, si vous sauvegardez cela sur votre disque dur et que vous l'ouvrez ensuite, au début IE se plaint de quelque chose à propos d'ActiveX et d'autres choses. Après l'avoir fait disparaître, tout fonctionne comme prévu. Mais si vous actualisez la page, le problème est de nouveau là.

Ajouté: En fait, vous pouvez réduire encore plus loin juste

window.onload= function() 
{ 
    document.getElementById('div1').style.zIndex = 800; 
}

Et le problème est toujours là.

Source

2010-06-01 Vilx-

Cette plainte "ActiveX et d'autres choses" (barre d'informations) signifie que votre code JavaScript n'a pas fonctionné non plus. Par conséquent, si vous l'attendiez, c'est votre problème là. – EricLaw

@EricLaw - Je ne suis pas * stupide *. Laissez-moi reformuler. Lorsque IE vous invite 'Pour vous aider à protéger votre sécurité, Internet Explorer a interdit à cette page Web d'exécuter des scripts ou des contrôles ActiveX pouvant accéder à votre ordinateur. Cliquez ici pour les options ... ', vous devez cliquer dessus et sélectionner' Autoriser le contenu bloqué ... '. Après cela, vous devez actualiser la page (vous ne serez plus invité) et le bug sera observable. –

absolute div2 est dans un élément relative, cet élément par rapport div1 a la même zIndex que l'élément div3 relative. Je pense que IE pourrait choisir la zIndex relative de div1 (et le fait qu'il est avant div3) pour aider à mettre l'élément absolute sur div3, tout simplement parce que div1 est « plus élevé » que div3.

Je n'ai pas IE7 à portée de main pour tester réellement votre code en ce moment, mais peut-être si vous essayez avec des valeurs zIndex plus faciles, et tous différents? Comme "100, 200, 300" pour div1, etc. (respectivement), de cette façon div3 devrait être au-dessus de div1, ainsi div2.

dieu qui sonne comme une charge de charabia quand je relis, mais nous espérons qu'il aide

(ajouté, de mon commentaire ci-dessous) modifier la valeur overflow de ces 3 éléments div à visible et il fonctionne . Cela semble étrange, mais c'est IE; étrange.

Source

2010-06-01 15:28:41 CharlesLeaf

Je pense que vous avez mélangé la numérotation. :) div1 et div2 sont relatifs; div3 est absolu et dans div1. –

@Vilx, non ... dans votre balisage, div2 est dans div1. – James

Sh * t. Fixation! : D Là, ça devrait le faire. C'est ce que je voulais dire. –

Vous n'êtes pas sûr de ce que vous avez déclaré que vous connaissez déjà, mais IE7 génère un nouveau contexte d'empilement sur les éléments positionnés afin que z-index ne fonctionne pas correctement dans IE < 8. Je ne me souviens pas du correctif Je ne suis pas sûr que cela s'applique ici, mais Google autour pour cela.

This appears to be a helpful article.

Source

2010-06-01 16:02:05 Rob

Non, ce n'est pas le cas. J'ai déjà dit que je savais à ce sujet, et l'exemple ci-dessus devrait fonctionner aussi dans cet esprit. –

Pourquoi zIndex ne fonctionne pas à partir de IE/Javascript?

Répondre

Questions connexes