JQUERY SET Élément DOM sur la vue de la vue Z-Index

Fonction jQuery pour définir n'importe quel élément DOM sur la vue de la surface (apporter à l'avant ) Utilisation de la propriété CSS Z-Index.

jQuery<span>.fn.mb_bringToFront= function(zIndexContext){
</span>    <span>var zi=1;
</span>    <span>var els= zIndexContext && zIndexContext!="auto" ? $(zIndexContext): $("*");
</span>    els<span>.not(".alwaysOnTop").each(function() {
</span>      <span>if($(this).css("position")!="static"){
</span>        <span>var cur = parseInt($(this).css('zIndex'));
</span>        zi <span>= cur > zi ? parseInt($(this).css('zIndex')) : zi;
</span>      <span>}
</span>    <span>});
</span>    <span>$(this).not(".alwaysOnTop").css('zIndex',zi+=1);
</span>    <span>return zi;
</span>  <span>};</span>

Les questions fréquemment posées sur jQuery et Z-Index

Comment puis-je définir l'index z d'un élément DOM à l'aide de jQuery?

pour définir l'index z d'un élément DOM en utilisant jQuery, vous pouvez utiliser la méthode .css (). Cette méthode vous permet d'obtenir ou de définir les propriétés de style des éléments sélectionnés. Voici un exemple de la façon dont vous pouvez l'utiliser pour définir l'index Z:

$ ("# élément"). CSS ("Z-Index", "999");
dans cet exemple, "#Element" est l'ID de l'élément DOM que vous souhaitez modifier, et "999" est la nouvelle valeur z-index.

Pourquoi mon changement Z-Index ne prend-il pas effet?

Il pourrait y avoir plusieurs raisons pour lesquelles votre changement d'indice Z ne prend pas effet. L'une des raisons courantes est que l'élément que vous essayez de changer n'est pas positionné. La propriété Z-Index fonctionne uniquement sur des éléments positionnés (c'est-à-dire des éléments avec position: relative, position: absolue ou position: fixe). Si votre élément n'est pas positionné, vous pouvez définir sa position en utilisant la méthode .css (), comme ceci:

$ ("# élément"). CSS ("position", "relatif");

Comment puis-je obtenir l'index z actuel d'un élément DOM?

Vous pouvez obtenir l'index z actuel d'un élément DOM en utilisant la méthode .css (), comme Ceci:

var zindex = $ ("# élément"). CSS ("z-index");
Dans cet exemple, Zindex maintira l'index z actuel de l'élément avec id " ».

Puis-je définir l'index z de plusieurs éléments à la fois?

Oui, vous pouvez définir l'indice Z de plusieurs éléments à la fois en utilisant le .css () méthode. Voici un exemple:

$ (". Elements"). CSS ("Z-Index", "999");
Dans cet exemple, tous les éléments avec la classe "Elements" auront leur Z -index réglé sur «999».

Comment puis-je modifier dynamiquement l'index z d'un élément?

Vous pouvez modifier dynamiquement l'indice z d'un élément en utilisant Méthode .css () de jQuery en combinaison avec les gestionnaires d'événements. Par exemple, vous pouvez augmenter l'index z d'un élément lorsqu'il est cliqué, comme ceci:

$ ("# élément"). Cliquez sur (fonction () {
var zindex = parseInt ($ ($ ( this) .css ("z-index"));
$ (this) .css ("z-index", zindex 1);
});
dans ce Exemple, chaque fois que l'élément avec ID «élément» est cliqué, son indice z augmentera de 1.

Quelle est la valeur maximale que je peux définir pour Z-Index?

Le maximum Valeur que vous pouvez définir pour Z-Index dépend du navigateur. La plupart des navigateurs prennent en charge les valeurs d'index z jusqu'à 2147483647.

Puis-je utiliser des valeurs négatives pour Z-Index?

Oui, vous pouvez utiliser des valeurs négatives pour Z-Index. Un indice Z négatif signifie que l'élément sera affiché derrière d'autres éléments qui ont un indice z de 0 ou plus.

L'index z fonctionne-t-il avec tous les éléments HTML?

La propriété Z-Index fonctionne avec tous les éléments HTML, mais il affecte uniquement les éléments qui sont positionnés (c'est-à-dire les éléments avec position: relative, position: absolue , ou position: fixe).

créer un contexte d'empilement. Un contexte d'empilement est une conceptualisation tridimensionnelle des éléments HTML le long d'un axe Z imaginaire par rapport à l'utilisateur, qui est supposé faire face à la fenêtre ou à la page Web.

Comment fonctionne Z-Index avec Parent et Éléments enfants?

Si un élément parent a un indice Z plus élevé que son enfant, l'enfant apparaîtra toujours au-dessus du parent. En effet, les éléments enfants sont empilés devant leur parent par défaut. Cependant, si les éléments parents et enfants sont dans différents contextes d'empilement, celui avec l'index Z plus élevé apparaîtra au sommet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!