Cette propriété me rend confondre.
Eh bien .. j'ai recherché dans Google:
la propriété Z-Index Spécifie l'ordre de pile d'un élément.
Un élément avec un ordre de pile plus important est toujours devant un élément avec un ordre de pile inférieur.
Remarque: Z-Index ne fonctionne que sur des éléments positionnés (position: absolu, position: relative ou position: fixe). Source de réponse
Quel est l'utilisation de z-index?
l'ordre de laquelle les éléments se chevauchent les uns des autres.
À cette fin, vous pouvez affecter chaque élément un numéro (Z-Index). Le système est qu'un élément avec un nombre plus élevé chevauche un élément avec un nombre inférieur. Réponse Source
OK Je comprends maintenant, il organise les éléments et nous pouvons utiliser n'importe quel nombre ... Le numéro d'index Z supérieur apparaît sur tous les éléments..ok Nice.
z-index et jQuery ..très simple et très gentil
... Mais j'ai remarqué des réponses que cela dépend de la propriété de position, donc -> ... (Google) ..
quelle est la relation entre z-index et position?
OK ... donc z-index et la position sont couple..minez-les ensemble ..
Besoin de plus d'informations:
Quels sont les utilisations de z-index ou que pouvons-nous faire avec z-index (en fonction des balises)?
Corrigez-moi si je comprends mal ...
4 Réponses :
Je suggérerais d'examiner cette propriété sur smashingmagzine .
La propriété CSS Z-Index: un look complet
Il couvre toutes les noix et les boulons de cette propriété avec de grands exemples et démonstrations.
incroyable ... mais je ne pense pas que "couvre toutes les noix et les boulons de cette propriété" ..... je vais lire plus ... Merci
@JJJ: Qu'est-ce qu'il manque, ce sera génial savoir si vous pouviez partager :)
. Je ne sais pas encore ... je cherche plus d'informations
La chose la plus importante à retenir est que z-index ne fonctionne que si l'élément a la position relative, absolue ou fixe
Cette déclaration est-elle vraie? Z-index ne fonctionne que si l'attribut de position défini avec la valeur
Je ne suis pas tout à fait sûr de ce que vous demandez, mais que vous n'avez jamais besoin d'utiliser Z-Index si vous faites un style compliqué par exemple. Survolez des info-bulles ou des navigations déroulantes, simplement pour vous assurer d'afficher sur un autre contenu de page.
Pour la conception de base, vous éviterez généralement d'utiliser les propriétés de position et d'index Z, car vous pouvez généralement obtenir les mêmes effets avec une meilleure compatibilité des performances et du navigateur avec des flotteurs seulement etc.
Le Magazine Smashing Link Publié par Sarfraz est un excellent article sur le sujet et un bon point de référence si vous avez toujours du mal à comprendre la fonctionnalité de la propriété.
Oh .. "Éviter" .. pourquoi? (Expliquez plus) ... je veux dire, selon ce que j'ai lu, c'est des éléments simples organisateur .. !!
J'ai seulement tendance à l'éviter parce que, pour la plupart du design, il n'est pas nécessaire et cela se comporte assez de manière incohérente entre les navigateurs et vous finirez par passer du temps à ce qu'il fonctionne en héritage. Par tous les moyens, utilisez-le si vous en avez besoin, mais si vous ne faites pas de dériver / info-butins / quelque chose d'autre de similaire, je ne vois pas pourquoi vous auriez besoin de.
@ Steve ... Alors .. Cela fait des conflits sur les navigateurs ..?
Je ne dirais pas que cela rend les conflits sur les navigateurs, mais comme indiqué au-dessus de diverses versions d'IE ont différents défauts de Z-Index et se comportent différemment autour de lui.
z-index est la propriété qui détermine quel élément HTML apparaît sur le dessus d'un autre élément HTML lorsqu'il se chevauche. L'idée de base est que l'élément avec l'index Z le plus élevé est "sur le dessus".
Par défaut, les éléments ont un index z de zéro, mais le réglage de la propriété CSS sur un élément à 1, et une autre à 5 fera que ce dernier élément soit "sur le dessus" du premier, s'ils se chevauchent.
Jusqu'à présent, si simple, mais il y a plusieurs choses à rechercher.
Un, comme déjà mentionné dans une autre réponse, est que Z-Index n'a qu'un effet si l'élément est positionné avec position absolue, fixe ou relative. (c'est-à-dire la propriété CSS "Position"). Un élément non indépendant a un index z de zéro.
Pour compliquer les choses plus loin (et dans mon expérience, la zone qui n'est souvent pas comprise) est le concept du contexte d'empilement. Plus d'informations peuvent être trouvées dans des articles tels que Ceci . En bref, chaque fois que vous définissez explicitement un nouvel index Z, vous démarrez un nouveau contexte d'empilement. Tous les éléments enfants de celui sur lequel l'indice Z a été défini sont maintenant dans ce nouveau contexte d'empilement, qui peut être au-dessus ou au-dessous d'un contexte d'empilement sur un autre élément non liée.
Qu'est-ce que ce contexte d'empilement signifie? Cela signifie qu'un élément d'un index z de 100 n'est pas nécessairement sur le dessus d'un élément avec un index Z de 1. S'ils sont dans différents contextes d'empilement, seuls les Z-index des contextes d'empilement eux-mêmes.
Merci d'avoir fait cela simple pour moi ... mais j'ai un Q: Vous avez dit "Chaque fois que vous définissez explicitement un nouvel index Z, vous démarrez un nouveau contexte d'empilement" >> Est-ce que cela rend le site Web plus lourd ou quelque chose comme ça ?
Lorsque vous dites "plus lourd", je pense que vous voulez dire "le rend-il plus lourd / plus lent". La vérité est que je n'ai jamais vérifié si elle ralentissait (ou augmente l'utilisation de la mémoire) pour avoir de nombreux contextes d'empilement, mais même si cela le fait (ce que je ne suis pas sûr de cela), je m'attendais à ce que l'effet soit très petit . De manière générale, votre page ne se retrouvera pas avec trop de contextes d'empilement de toute façon. Si vous devez définir Z-Index partout, il s'agit probablement d'un signe que la page a besoin de redessiner. De manière générale, même sur des pages complexes avec des trucs qui se chevauchent, je ne fixe que z-index dans une poignée de lieux.
Oh ... * Remarque: IE6 et IE7 Appliquer de manière incorrecte Z-Index: 0 à tous les éléments positionnés. La spécification 2.1 indique que les éléments positionnés de z-index: auto doivent rester z-index: auto Sauf non explicitement modifiée * de la troisième source
@ROB Levine ... c'est juste une information ... ne devrait-il pas ... devrais-je le changer ??? !!
Une nouvelle question: est-ce une combinaison de lettres-index ?!
@JJJ - Vous ne pouvez pas récupérer de la communautéWiki (sinon, vous pouvez tromper le système de réputation). En règle générale, la communautéWiki est pour des postes qui sont plus d'une discussion communautaire ou d'informations générales. Votre question ici est responsable et aurait probablement été mieux laissée comme une question normale (IMHO de toute façon). Les gens ont souvent tendance à répondre davantage à des non-CW lors de la réputation. Peu importe cependant - vous avez beaucoup de réponses de toute façon!
@jjj - Ne comprenez pas votre question "Est-ce une des combinaisons de lettres-index"
@ROB Levine ... oh je ne savais pas..mais c'est ok .. La connaissance est ce que je veux et plus important .. A propos de la Q :: J'ai vu cela ... sitepoint.com/books/cssdesign1/bookindex.php ... donc j'ai demandé si y a-t-il quelque chose comme un index , b-index ... ou etc ... pour être sûr qu'il est lié ... merci, vous êtes vraiment utile.
@MARC Gravell ♦ ... pas de problème..Merci de toute façon
Vous n'avez réellement besoin de position lorsqu'il s'agit d'éléments emballés de bootstrap afin d'utiliser z-index. Je suppose que la raison est que Bootstrap a une position avec la mise en œuvre informatique.