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".
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.