Problème de z-index à résoudre en javacript

Le
Sam Lion
Bonjour à vous,

Mon problème du jour n'est pas Javascript mais peut être que celui-ci va le
résoudre.
J'ai, pour l'exemple, 3 blocs div bleus en position absolute sur une page,
avec un z-index de 105, 100 et 100
Dans l'un de ces blocs, j'ai un div orange, en position relative, avec un
z-index de 2000.

Voir : http://www.sycie.fr/test_div/

j'utilise prototype et aculo pour déplacer ce bloc orange d'un bloc bleu à
l'autre. A terme, il s'agit en fait d'un calendrier avec un bloc bleu par
jour et le bloc orange représentant un événement à déplacer d'une date à
l'autre.

Dans la version complète tout fonctionne à merveillesauf que le z-index à
2000 du bloc orange n'est pas du tout pris en compte. J'ai l'impression que
l'index maximum est de 100, puisque ce div est contenu dans un autre div
dont l'index est de 100.

Conséquence : le bloc orange passe sous les blocs qui ont un index supérieur
à 100, malgré son propre index de 2000. Or, il faut absolument qu'il passe
devant ! vous allez me dire qu'il suffit de mettre tous les index à 100,
mais pour diverses raisons les index de mes blocs bleus peuvent varier.

Le problème peut-il être résolu directement au niveau de la gestion des
index à votre avis ? ou faut-il qu'au moment de déplacer le bloc orange
j'aille par JavaScript augmenter la valeur de l'index du div conteneur ?

Sam
Questions / Réponses high-tech
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #21639991
Le 27/04/2010 13:29, Sam Lion a écrit :

Mon problème du jour n'est pas Javascript mais peut être que celui-ci va le
résoudre.
J'ai, pour l'exemple, 3 blocs div bleus en position absolute sur une page,
avec un z-index de 105, 100 et 100
Dans l'un de ces blocs, j'ai un div orange, en position relative, avec un
z-index de 2000.

Voir : http://www.sycie.fr/test_div/



--------------------------------------------------------------------


</div>
--------------------------------------------------------------------

j'utilise prototype et aculo pour déplacer ce bloc orange d'un bloc bleu à
l'autre. A terme, il s'agit en fait d'un calendrier avec un bloc bleu par
jour et le bloc orange représentant un événement à déplacer d'une date à
l'autre.

Dans la version complète tout fonctionne à merveille...sauf que le z-index à
2000 du bloc orange n'est pas du tout pris en compte. [...]



Ben si, il est pris en compte *dans le nouveau contexte d'empilement
créé à l'intérieur de jour3* ! Cela veut dire qu'il sera devant tout
autre bloc *interne à jour3* qui aurait un z-index inférieur à 2000.

En revanche, vu que jour3 a un z-index inférieur à celui de jour1, tout
ce qui est dans jour3 (y compris 133) sera derrière tout ce qui est dans
jour1.

[...]

Le problème peut-il être résolu directement au niveau de la gestion des
index à votre avis ? ou faut-il qu'au moment de déplacer le bloc orange
j'aille par JavaScript augmenter la valeur de l'index du div conteneur ?



Il te suffit de sortir le bloc 133 du bloc jour3, en le mettant en
position:absolute dans le même conteneur que jour1, jour2 et jour3.

Cordialement,
--
Olivier Miakinen
Sam Lion
Le #21641131
Il te suffit de sortir le bloc 133 du bloc jour3, en le mettant en
position:absolute dans le même conteneur que jour1, jour2 et jour3.

Cordialement,
--
Olivier Miakinen




Merci pour cette piste !
Comme j'avais vraiment besoin d'être en relatif pour le bloc qui se
déplace", finalement j'ai crée un blog div supplémentaire en absolute, dans
lequel j'ai placé au même niveau et en relatif/inherit mon bloc bleu et mon
bloc orange.
Ca marche parfaitement.
http://www.sycie.fr/test_div/
Merci de l'aide.
Sam
SAM
Le #21642001
Le 4/27/10 1:29 PM, Sam Lion a écrit :
Bonjour à vous,

Mon problème du jour n'est pas Javascript mais peut être que celui-ci va
le résoudre.
J'ai, pour l'exemple, 3 blocs div bleus en position absolute sur une
page, avec un z-index de 105, 100 et 100



On se demande bien pourquoi il faut les affubler de z-index
Sont pas biens là où ils sont ?

Dans l'un de ces blocs, j'ai un div orange, en position relative, avec
un z-index de 2000.



Pareil, on s'en moque de son altitude
Yaka mettre le div 133 tout à la fin du code html
(ou du div contenant les jours)
il aura ainsi, sans la spécifier, l'altitude la + élevée (de cette page)
et les jours n'ont sans doute pas besoin de z-index non plus

Voir : http://www.sycie.fr/test_div/

j'utilise prototype et aculo pour déplacer ce bloc orange d'un bloc bleu
à l'autre.



tant pis pour toi !

A terme, il s'agit en fait d'un calendrier avec un bloc bleu
par jour et le bloc orange représentant un événement à déplacer d'une
date à l'autre.



Oui, bon, ben, j'arrive à le déplacer mais pas à le dropper.
alors ...

et puis d'abord on ne met pas d'Id qui commence par un chiffre

Dans la version complète tout fonctionne à merveille...sauf que le
z-index à 2000 du bloc orange n'est pas du tout pris en compte. J'ai
l'impression que l'index maximum est de 100, puisque ce div est contenu
dans un autre div dont l'index est de 100.



Ha? pas fastoche à voir avec ton code non indenté.
Yaka l'sortir de là crévindiou !
l'acudansldos sait pas le faire ?

Conséquence : le bloc orange passe sous les blocs qui ont un index
supérieur à 100, malgré son propre index de 2000. Or, il faut absolument



Pas pu le voir puisque dès que je le lâche il retourne à sa case départ

qu'il passe devant ! vous allez me dire qu'il suffit de mettre tous les
index à 100, mais pour diverses raisons les index de mes blocs bleus
peuvent varier.

Le problème peut-il être résolu directement au niveau de la gestion des
index à votre avis ? ou faut-il qu'au moment de déplacer le bloc orange
j'aille par JavaScript augmenter la valeur de l'index du div conteneur ?



non tu le déplaces d'un bloc conteneur à l'autre
de jour1 à jour2 ou jour3

Je ne comprends pas comment tu comptes le draguer et dropper
d'un jour à l'autre s'il reste prisonnier le l'un d'eux

--
sm
SAM
Le #21641991
Le 4/27/10 4:58 PM, Sam Lion a écrit :
Ca marche parfaitement.
http://www.sycie.fr/test_div/



Non, ça marche pô
Sam Lion
Le #21674741
Ca marche parfaitement.
http://www.sycie.fr/test_div/



Non, ça marche pô



Bah pourquoi ? mon bloc orange est bien au dessus de mon bloc bleu ?
Sam (l'autre!)
Sam Lion
Le #21674811
non tu le déplaces d'un bloc conteneur à l'autre
de jour1 à jour2 ou jour3

Je ne comprends pas comment tu comptes le draguer et dropper
d'un jour à l'autre s'il reste prisonnier le l'un d'eux

--
sm



Merci d'avoir passé ce temps.
Je t'envoie sur ton mail l'adresse du vrai calendrier en développement qui
répond à tes interrogations...
Sam
SAM
Le #21675521
Le 5/3/10 9:40 AM, Sam Lion a écrit :


Ca marche parfaitement.
http://www.sycie.fr/test_div/



Non, ça marche pô



Bah pourquoi ? mon bloc orange est bien au dessus de mon bloc bleu ?



Ben ... je ne puis le jeter dans aucun autre bloc bleu,
donc, non, ça marche pas.

sinon, oui, depuis le début, l'orange est sur le bleu 1

OK, vu le truc sur le site.
--
SAM
Publicité
Poster une réponse
Anonyme