Les contextes d'empilement

Que sont les contextes d'empilement en CSS, et comment les gérer ?

a marqué ce sujet comme résolu.

Hello,

J'ai écrit un petit tutoriel sur les contextes d'empilement en CSS. C'est un truc pas super connu ou compris par pas mal de développeurs, donc j'espère apporter quelques lumières sur le fonctionnement de l'axe Z de CSS.

J'attends vos suggestions, corrections, questions, etc. :)

Merci d'avance pour votre aide

+0 -0

J'aime beaucoup. Très bien écrit malgré quelques maladresses et très clair. Je n'ai pas encore terminé donc les remarques suivantes ne couvrent pas tout le tutoriel :

La logique veut donc que CSS doit avoir des règles d'empilement par défaut.

Pas très français. ^^

on peut commencer à ordonner nous-même

on peut commencer à ordonner soi-même

Tous nos éléments sont sensés être sur une même couche.

Même si on le devine aisément : c'est quoi une couche ? Edit : tu en parles au début du second extrait. Un peu tard peut-être ?

Imaginez votre page web comme un mille-feuille

reprenons l'image du mille-feuille.

C'est un peu notre mille-feuille de base (mille-feuille 0).

que je vais placer sur une des couches du mille-feuille 0

J'imagine qu'il y a un "s" à "mille-feuille".

Imaginons que je créé un nouvel élément

A poursuivre…

+0 -0

Salut, merci pour le retour. :)

Je vais corriger les fautes qui restent (mauvaise idée d'écrire à 1h du matin) et expliquer un peu plus en détails ce qu'est une couche, effectivement. Je vais aussi aborder le cas un peu particulier de la position fixe.

J'imagine qu'il y a un "s" à "mille-feuille".

Je pensais aussi, mais après vérification ce n'est pas le cas.

Introduction :

L'un des points très souvent flou

Je mettrais bien "flou" au pluriel.

les "contextes d'empilement"

C'est une broutille, mais peut-être serait-il préférable d'utiliser des guillemets français ?

L'axe Z en CSS :

Même si vous ne définissez aucune position sur Z

Il y a rupture avec le paragraphe précédent. Je rajouterais un "Toutefois".

aussi appelée "couche 0"

Guillemets.

C'est le même principe que sur les logiciels d'édition graphique comme Adobe Photoshop

Plutôt : "C'est le même principe que sur les logiciels d'édition graphique tels qu'Adobe Photoshop". Ou encore mieux : "C'est le même principe que sur les logiciels d'édition graphique tels que Gimp". :P

On peut considérer l'axe Z de CSS comme un empilement de couches indépendantes

Je dirais plutôt : "CSS considère l'axe Z comme un empilement de couches indépendantes".

où chaque unité de l'axe possède sa propre couche

Un peu flou : c'est quoi une unité ? Je ne suis pas certain que cette partie soit nécessaire. Dans un premier temps, savoir que CSS considère l'axe Z comme un mille-feuille suffit.

La couche 0, c'est tout simplement la couche située à l'origine de l'axe Z.

Existe-t-il des couches négatives ? Le cas échéant, comme positionne-t-on cette origine (par rapport à la balise html je crois, mais c'est dit plus bas) ?

Tous nos éléments sont censés être sur une même couche.

Parce qu'on n'a pas spécifié de position verticale.

CSS doit donc avoir logiquement des règles d'empilement par défaut.

J'enlèverais le "logiquement".

Pour l'exemple, je rajouterais un texte sur l'élément parent pour qu'on puisse le distinguer des autres.

Gérer l'empilement avec z-index :

La partie sur le mille-feuille (sans faire référence à z-index) gagnerait à être incluse au début du tutoriel, quand tu introduis la notion de couche.

Contextes d'empilement :

c'est-à-dire que spécifier un numéro de couche place l'élément en question automatiquement, dans tous les cas, sur la couche correspondante, comme on s'y attendrait normalement.

"c'est-à-dire que spécifier un numéro de couche place automatiquement l'élément en question sur la couche correspondante, comme on peut s'y attendre."

directement lié à la nature de HTML qui permet d'imbriquer les

"directement lié à la nature de HTML, qui permet d'imbriquer les"

Le parent a alors des enfants qui ne sont plus sur la même couche que lui, les rendant indépendants sur l'axe Z.

"Le parent a alors des enfants qui ne sont plus sur la même couche que lui : ils sont indépendants selon l'axe Z."

les enfants ne suivront pas, puisqu'indépendants sur Z

"selon Z"

Pour mieux visualiser ce qu'est un contexte d'empilement, reprenons l'image du mille-feuille. Le contexte d'empilement initial se trouve sur l'élément racine de la page web

C'est un peu flou : un contexte d'empilement est-il un mille-feuille ? Du coup, plutôt : "Un contexte d'empilement s'apparente à un mille-feuille.". Et là tu dis que, du coup, les couches dont on parlait précédemment forment un contexte d'empilement, appelé contexte d'empilement initial. C'est un mille-feuille centré sur l'élément racine de la page, i.e. l'élément html.

le premier enfant doit aller par-dessus le second

"se positionner" plutôt que "aller" ?

Solution : pour placer les enfants sur Z sans les changer de couche sur le mille-feuille 0, je dois tout simplement cuisiner un nouveau mille-feuille, qui sera placé sur la couche 3 du premier.

Je mettrais juste "Solution" en gras.

Dans l'exemple des contextes d'empilement, pourquoi l'enfant 1 n'est-il pas sur la couche 0 du contexte d'empilement de son parent ?

z-index ne fonctionne que lorsqu'il existe un contexte d'empilement.

J'ajouterais que z-index permet de positionner un élément dans le contexte d'empilement de son parent.

Si l'on reprend le problème vu à la fin de la partie précédente, on se rend compte qu'on n'avait pas définit de contexte d'empilement.

Pour éviter la répétition et la faute d'orthographe : "Si l'on reprend le problème vu à la fin de la partie précédente, on se rend compte qu'on n'en avait pas défini pour l'élément .parent.".

Positionner un élément (c'est-à-dire lui définir une position différente de static) et lui assigner un z-index différent de auto crée automatiquement un contexte d'empilement.

Je suis perdu. Pour utiliser z-index sur les enfants, il faut que l'élément parent ait un contexte d'empilement, non ?

Le code juste en desous nous embrouille un peu : tu devrais reprendre l'exemple du départ ou alors clairement afficher le HTML.

et on les a placé sur le contexte initial

"et on les a placés sur le contexte initial"


Je me suis perdu dans la dernière partie, principalement à cause du fait que, lorsque tu parles de contexte d'empilement, on ignore si c'est celui attaché à l'élément ou celui dans lequel se situe l'élément (donc celui attaché au parent).

Au passage, sais-tu que tu peux intégrer tes fiddles au tutoriel ? Il faut en demander l'activation par un admin et jeter un coup d'oeil ici. Ca t'éviterait d'ailleurs de copier-coller le code. ^^

+0 -0

Salut,

Je compte accepter ton tuto, mais j'ai quelques remarques concernant "la compréhension" des exemples. je trouve que ce serait mieux et plus parlant de nommer les divs en fonction de leur couleur (.bleu, .rouge .vert (ou en anglais)) plutôt que .foo .bar et .baz. Ca faciliterait la "compréhension visuelle".

Et éventuellement ajouter un ou deux exemples dans la partie "Contextes d'empilement" pour illustrer tes codes.

Ce sujet est verrouillé.