28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai trouvé un peu dommage que dans l'astuce Comment fonctionne la propriété CSS z-index ? on ne parle pas, même très rapidement du contexte d'empilement.
Je suis resté bloqué un petit moment sans vraiment comprendre pourquoi un z-index: 4 passé en dessous d'un z-index: 2 Smiley sweatdrop

Rassurez vous, j'ai fini par comprendre, grâce au lien en bas de page vers developer.mozilla.org.
Modifié par benj (03 Jul 2012 - 18:10)
Salut,

Je pense qu'il n'y a pas grand chose a expliquer, a partir du moment ou tu connait le positionnement et ses contraintes ça paraît logique. Bref, c'est plus une méconnaissance qu'un oubli...

Edit: De plus il n'y aurai pas un grand intérêt a ce qu'un élément z-index: 5 avec un un parent z-index: 2 passe par dessus un élément z-index: 1 avec un parent z-index: 3, ce serai un joyeux bazar (pour rester poli)
Modifié par JJK801 (03 Jul 2012 - 14:43)
JJK801 a écrit :
Je pense qu'il n'y a pas grand chose a expliquer, a partir du moment ou tu connait le positionnement et ses contraintes ça paraît logique. Bref, c'est plus une méconnaissance qu'un oubli...

Merci bien, je connais très bien le positionnement css et ses contraintes.
Penses-tu que l'astuce répond entièrement à la question "Comment fonctionne la propriété CSS z-index ?"

JJK801 a écrit :
Edit: De plus il n'y aurai pas un grand intérêt a ce qu'un élément z-index: 5 avec un un parent z-index: 2 passe par dessus un élément z-index: 1 avec un parent z-index: 3, ce serai un joyeux bazar (pour rester poli)

Je comprends l’intérêt de ce comportement. Mais dans mon cas ce n'était pas souhaitable.
Il est vrai qu'on ne voit du coup qu'une partie du fonctionnement de z-index (enfin... ce qu'il a mit devrait suffire, mais ça manque peut-être un peu d'exemples plus complexes...)
benj a écrit :

Merci bien, je connais très bien le positionnement css et ses contraintes.
Penses-tu que l'astuce répond entièrement à la question "Comment fonctionne la propriété CSS z-index ?"


Oui, si il fallait expliquer tous les cas de figure, ce serai plus une astuce mais un tuto...

benj a écrit :
Je comprends l’intérêt de ce comportement. Mais dans mon cas ce n'était pas souhaitable.


Il n'est jamais question de souhaitable ou pas souhaitable, si la construction de ton HTML ne permet pas de faire ce que tu souhaite faire, alors tu t'est trompé, mais c'est pas la faute de z-index, ni de l'astuce Smiley cligne

La construction d'une page web doit rester un tant soit peu réaliste, essaye d'empiler 2 feuilles de papier de de faire passer celle du dessous a travers celle du dessus, c'est pas évident Smiley langue
Modifié par JJK801 (03 Jul 2012 - 17:40)
Hello,

D'expérience: 99% des problèmes concernant la propriété z-index sur ce forum viennent de:
- z-index utilisé sur un élément non positionné (cas le plus fréquent);
- bug sur l'implémentation de z-index dans IE 6-7 (plus rare, et problème qui se raréfie en même temps que ces navigateurs).

Apparemment les règles en cas d'imbrication de z-index posent très rarement problème, soit parce que les personnes n'imbriquent pas des éléments positionnés, soit parce que le fonctionnement standard est compris assez rapidement après un essai ou deux. Ça ne me semble donc pas nécessaire de complexifier cette astuce qui répond bien aux besoins des débutants.
JJK801 a écrit :
Oui, si il fallait expliquer tous les cas de figure, ce serai plus une astuce mais un tuto...
Justement il n'y a pas d'autres cas possible... Juste un cas de contexte d'empilement.

JJK801 a écrit :
Il n'est jamais question de souhaitable ou pas souhaitable, si la construction de ton HTML ne permet pas de faire ce que tu souhaite faire, alors tu t'est trompé, mais c'est pas la faute de z-index, ni de l'astuce Smiley cligne

Oui je sais, j'ai du mal avec les positionnements css et mon code html est mal fait.

Peut être que mon cas est un peu particulier et que ce comportement n'intéresse personne.
D'ailleurs, ça doit être pour cela que je n'avais encore jamais rencontré ce problème.

fvsch a écrit :
Ça ne me semble donc pas nécessaire de complexifier cette astuce qui répond bien aux besoins des débutants.

ok merci pour ta réponse. C'est juste que la mention ci-dessous peut induire en erreur.
fvsch a écrit :
2. Les valeurs les plus élevées sont au premier plan, et les plus faibles sont au second plan. Un z-index de 2 sera placé au dessus d'un z-index de 1, et un z-index de -1 sera placé au dessus d'un z-index de -2.
benj a écrit :
Oui je sais, j'ai du mal avec les positionnements css et mon code html est mal fait.


Un petit problème de susceptibilité aussi, non?