JQuery fadeIn sur position: cause absolue problème z-index

Je viens d'avoir le même problème, donc j'ai pensé que je partagerais la solution. Comme vous l'avez dit, jQuery fait quelque chose avec fadeIn() , fadeOut() , slideToggle() etc. lorsque les éléments sont absolument positionnés avec un z-index , les éléments ci-dessous étant également positionnés comme absolus et dotés d'un z-index .

Si vous supprimez les éléments inférieurs, vous remarquerez que votre animation fonctionne bien. Mais avec les «sous-éléments», vous n'obtenez que votre fadeIn quand il est complètement fané. C'est parce que l' z-index est reconnu uniquement une fois l'animation terminée.

La solution consiste à créer un conteneur autour de chaque élément dans lequel vous allez disparaître. Vous pouvez également créer un conteneur autour de tous les éléments, mais gardez à l'esprit que vous n'aurez aucun effet de survol ou de clic pour les sous-éléments où le conteneur existe .

Donc, dans mon exemple, je vais juste utiliser un div que vous essayez de disparaître. Alors, disons que vous avez une fonctionnalité «zoom in» qui est enterrée pendant l'animation:

 <div id="zoomin"></div> #zoomin { position:absolute; top:20px; right:20px; display:block; z-index:15; width:47px; height:48px; } 

Actuellement zoom avant disparaîtra. La solution consiste donc à l'enrouler dans un conteneur et à appliquer le css suivant à ce conteneur:

 <!-- this is your container --> <div id="zoomincontainer" class="keepontop"> <!-- this is your div --> <div id="zoomin"></div> <!-- end container --> </div> #zoomincontainer { top:20px; right:20px; with:47px; height:48px; } div.keepontop { position:absolute; z-index:14; } 

Cela appliquera une base pour votre div et le gardera au dessus des autres couches pendant l'animation.

Notez que, parce que votre division 'zoomin' est absolument positionnée, vous devez appliquer la largeur, la hauteur et les caractéristiques de position à la division 'conteneur zoomincontain' de votre conteneur. Sinon, vous trouverez votre diviseur de contenants dans le coin supérieur gauche de votre page / image avec des dimensions de 0px x 0px – ce ne sera pas une base pour tout, à moins qu'il ne couvre toute la zone sous les divs que vous animez.

J'ai mis le PA et le z-index dans la classe 'keepontop' au cas où vous aviez un certain nombre de divs que vous allez disparaître.

ça fonctionne parfaitement maintenant. J'espère que ça aide!

Juste une autre note … J'avais le même problème et l'ai résolu par:

 <div class='keepontop'> <div class='overlay'> <div></div> <div></div> <div></div> <div></div> </div> </div> <script> $('.overlay).fadeIn(500); $('.keepontop').css('position', 'relative'); </script> .keepontop{ position:absolute; z-index:999; } 

Cela m'a permis d'avoir une div containg qui corrige le problème de l'index z, mais a également résolu le problème de l'événement de clic pour les DIV enterrés.

J'ai le même problème, et j'ai essayé toutes ces solutions et cela n'a pas résolu mon problème …

Ce que j'ai fait pour le résoudre, c'était avant d'appeler l'effet de fondu, j'ai diminué l'index z pour l'élément qui était en avant même avec l'index z "inférieur" … Alors, j'appelle le fondu avec la fonction complète, Alors lorsque mon effet de fondu se termine et que le problème de l'index z est automatiquement résolu, j'ai réglé l'index z pour l'élément que j'avais diminué au début.

 <div class="concept"> <div class="title">...</div> </div> <div class="content4>...</div> <script> $('.concept .title').css('z-index', 0); $('.content4').fadeIn(600,function(){ $('.concept .title').css('z-index', 1); }); </script> // CSS .concept { position: absolute; } .concept .title { position: absolute; z-index: 1; } .content4 { position: absolute; z-index: 1000; } 

Slidetoggle est vraiment excentrique … J'ai eu un problème similaire. La façon dont je l'ai fait fonctionner sur mon site était de simplement déplacer le div divisé au bas de mon html. Parce qu'il vient en dernier dans le DOM, l'index z doit être défini automatiquement plus haut que les éléments précédents. Comme il est absolument positionné, vous ne devriez pas avoir de problèmes avec la mise en page non plus.

Mettez un div autour de votre division de basculement. Ajouter le style avec la position relative et l'index z correct. (Il se peut que le z-index 1 ne soit pas suffisant pour vous, puis essayez avec un niveau supérieur, etc. 100)

 <div style="position: relative; z-index: 1;> <div id="component-to-toggle"> ... </div> </div> 

De cette façon, le composant de basculement se cachera quand il est censé, mais le div autour ne sera jamais et il ne perdra jamais son z-index.