Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
24 septembre 2007 1 24 /09 /septembre /2007 09:00

détail du 'Dragon' de Max Escher

Zou, cette fois on termine ! Par un article court (comparé aux autres…) et point trop ardu, en plus.

Tant qu'on n'aura pas mis au point d'écrans en relief une page HTML aura deux dimensions : largeur et hauteur, abscisse et ordonnée, haut/bas gauche/droite. Enfin presque : deux dimensions plus une, car les boîtes peuvent dans certains cas (marges négatives, positionnement absolu ou relatif) se superposer.

Voilà le sujet du jour, que je vais essayer de traiter en allant du simple (qui suffit largement dans la plupart des cas) au compliqué (dont il est toujours bon de connaître l'existence, ne serait-ce que pour savoir quand l'utiliser et quand s'en passer). Comme d'habitude, ça ne sort pas que de mon cerveau bouillonnant, mais d'abord d'ici : chapitre 9.9 de la spécification CSS 2, à lire pour vérifier que je n'écris pas (trop) de sottises.

2D +1 ou 3D ?

Les dimensions qui vous sont familières s'expriment en pixels, em ou ex, points, centimètres, pouces… bref, des unités de longueur. À l'opposé, pour se repérer en profondeur quand c'est nécessaire, CSS n'utilise que des nombres entiers sans dimension, de simples numéros d'ordre, positifs ou négatifs.

En termes imagés : la page HTML est un empilement de plans, un feuilleté plutôt qu'une sculpture.

De là le titre de l'article, de là aussi mon expression de  deux dimensions plus une  plutôt que  trois dimensions .

Notez que cette nuance se retrouve dans le nom même de la propriété CSS z-index. Le  z  est la lettre traditionnelle pour nommer la cote (après  x  et  y  pour l'abscisse et l'ordonnée) et  index  se traduit par  indice  : un numéro d'ordre, pas une dimension. De ce côté-là, donc, j'ai bon.

Pour s'y retrouver dans la suite : les termes  haut  et  bas  auront leur signification habituelle de  haut de l'écran  et  bas de l'écran  considéré comme un plan vertical dressé en face du lecteur. Pour parler de superposition, du fait qu'un plan est plus ou moins proche du spectateur, je n'utiliserai que les termes de  profondeur  et d'  altitude .

Le cas simple

Dans le cas simple, le plus courant, on ignore totalement l'existence même de z-index : la vie est belle.

Les boîtes arrivent dans le navigateur l'une après l'autre, celui-ci les arrange de gauche à droite et de haut en bas, selon leur nature (bloc ou ligne) et dans le respect de leurs emboîtements. Seuls les flottants perturbent cet ordre (on a parlé des flottants dans le tome 4 de ce roman) mais sans superposition, donc sans qu'on ait à se soucier de la  profondeur . La belle vie, vraiment.

Le cas un peu moins simple

Les questions surviennent avec les marges négatives :

 <img src="premiere_image.jpeg" /> <img src="deuxieme_image.jpeg" style="margin-left:-20px"/> 

Ce sont deux images, donc des éléments  en-ligne , donc disposés de gauche à droite s'ils ont assez de place pour ça. Supposons que oui : laquelle des deux images va recouvrir l'autre de 20 pixels ? Réponse : la deuxième.

Notez que le résultat serait le même avec

 <img src="premiere_image.jpeg" style="margin-right:-20px" /> <img src="deuxieme_image.jpeg"/> 

Dernier écrit = dernier posé

Le critère n'est pas  quel élément porte la marge négative ?  mais  quel élément précède l'autre dans le flux ? . Le principe général est donc très simple : ce qui est écrit après vient par-dessus ce qui est écrit avant.

Incroyable comme nombre de questions tordues se dissolvent dans l'azur quand on se souvient de ça.

Le cas encore moins simple (en apparence)

Les questions arrivent aussi quand certains éléments sont en positionnement relatif ou absolu (vous pouvez relire le tome 7 si ça vous dit).

Les éléments relatifs et absolus se placent  par-dessus  les éléments  normaux , cela reste acquis : les normaux au rez-de-chaussée, les autres à l'étage.

Et lorsque deux éléments  pas normaux  doivent se superposer ? Le principe précédent reste valide :  dernier écrit, dernier posé .

Donc question : comment s'affranchir de ce fameux principe ?

Un  Z  qui veut dire…

Celle-là, il fallait bien la placer.

Premier point : z-index n'a de sens et d'effet que pour des éléments  positionnés , autrement dit pour lesquels on précise un position autre que static (les éléments  pas normaux  de tout à l'heure).

Cela désigne évidemment les éléments absolus ou fixes, mais aussi ceux en position : relative. Notez qu'on retrouve l'idée que position : relative, sans autre précision, n'est pas anodin bien qu'il ne change rien à l'aspect de l'élément ou de la page.

Notez aussi que cela ne concerne pas les éléments flottants, sauf bien sûr si l'on précise leur position. Autre idée déjà croisée lors de la discussion sur le  bloc conteneur , et nous retrouverons le parallèle plus loin.

Deuxième point : z-index peut être nul, positif, négatif ou auto (valeur par défaut). Zéro : l'élément reste à son niveau, positif : l'élément se rapproche du spectateur, négatif : il s'en éloigne, auto : le navigateur se débrouille ( = comme dans les cas précédents).

Question inévitable :  niveau  oui, mais par rapport à quoi ? Ce qui nous amène au troisième point et à la section suivante.

Où est le niveau du sol ?

Pour l'ensemble de la page, le  sol  est naturellement body et son niveau, son z-index, est zéro par défaut. Rien de surprenant.

En l'absence d'éléments positionnés tout le monde est à ce même niveau. Le  dernier écrit, dernier posé  permet de résoudre les conflits à l'intérieur du niveau mais ne change le z-index de personne.

Si l'on veut contrôler l'altitude d'un élément, il faut d'abord lui donner un position, ne serait-ce qu'un simple position : relative qui ne le déplacera pas, puis un z-index. Dès lors, tout son contenu  monte  ou  descend  à ce niveau, y compris les éléments qui se trouvent à l'intérieur – sans quoi, quel intérêt ? – et qui résolvent leurs conflits au sein de ce niveau par  dernier écrit, dernier posé .

Tant qu'aucun élément positionné n'est inclus dans un autre, tout est simple et conforme à l'intuition, parce que toutes les  altitudes  sont comptées à partir de body. Mais…

Mais, lorsqu'on donne un z-index à quelque chose, cela a deux conséquences :

  1. ce quelque chose monte au niveau indiqué, comme attendu ;
  2. et surtout, il devient le nouveau  sol  de son contenu et définit une nouvelle échelle d'altitude pour ce contenu.

Qu'est-ce que ça signifie ? Où est le piège ?

Si un élément est à z-index : 1, compté à partir du  sol  de la page, les éléments qu'il contient et auxquels on donne à leur tour un z-index 2, 3, 4 … restent dans leur élément d'emballage. Leurs niveaux 2, 3, 4 sont en réalité des 1.2, 1.3, 1.4, des subdivisions du niveau 1 qui ne seront jamais plus haut perchées que le niveau 2 compté à partir du body.

Autrement dit, si d'autres éléments positionnés de la page recouvrent tout ou partie de l'élément d'altitude 1, ils continueront de le faire même si l'on donne des z-index extravagants aux composants de cet élément d'altitude 1.

On retrouve l'idée déjà vue que donner une position à un élément ne se contente pas d'agir sur l'élément lui-même mais en fait aussi le référentiel de tout son contenu. De même, lui donner un z-index commande son altitude et aussi celle de tout ce qu'il contient.

Ici se termine la théorie du z-index. Voyons la pratique.

Fin d'un mythe

Il y a comme un fétichisme curieux à propos de z-index : on comprend vaguement ce que ça fait, on l'a vu passer dans quelques astuces de haut vol, on en conclut que ça résout les problèmes coriaces si on met la bonne dose. Ceux qui se sont déjà battus pour installer un menu déroulant comprendront ce que je veux dire…

Face à ce qui ressemble à une superposition indésirable et récalcitrante, la première question à se poser (et tant pis si je me répète) est : est-ce bien une superposition ? Est-ce que l'élément n'est pas rogné plutôt que masqué, autrement dit est-ce que l'un de ses ancêtres ne serait pas en overflow : hidden ?

On peut le savoir en examinant le CSS ou, plus expéditif, on peut ajouter à son CSS cette ligne :

 * {overflow:visible ! important} 

Ça ne marche pas sous IE (à cause du ! important) et ça peut semer la panique dans le reste de la page, mais c'est un bon test pour orienter les recherches. Dans le cas d'un blog OB, l'histoire se concluera sans doute par

 #ln_0, #cl_0_0 {overflow:visible} 
… si l'on est en train d'installer un menu dans l'en-tête.

Si ce n'est pas un rognage, si c'est bien une superposition, alors seulement on peut agir sur z-index avec une chance que ça serve… mais en vérifiant d'abord que l'élément qui recouvre n'est pas déjà doté d'un z-index.

En résumé :

  1. la page est un mille-feuilles ;
  2. chaque élément doté d'un z-index définit son propre mille-feuilles ;
  3. on ne peut pas  entrelacer  les mille-feuilles.

Un dernier conseil

Pour z-index encore plus que pour tout le reste il faut procéder PAR ÉTAPES et TESTER avec plusieurs navigateurs.

Tant qu'on se limite à  rehausser  quelques éléments épars dans la page tout se passe généralement bien. Les différences entre navigateurs apparaissent lorsqu'on raffine, que plusieurs éléments dotés d'un z-index se recouvrent en partie ou bien qu'on ajoute un z-index à des éléments dont le conteneur est déjà doté d'un z-index : il semble bien que tout le monde ne comprenne pas la spécification de la même manière.

Donc soyez progressif, méthodique, prudent… et patient. Ce n'est pas le genre de chose qu'on rajoute à la volée comme on le ferait de quelques pixels sur une marge.

Conclusion

Vous avez tout lu ? Tout compris, tout retenu ? Tous les articles ? Vous êtes toujours là ? Tenez, vous avez bien gagné le droit de vous voir comme ça :

Surprise, surprise…

Mascaron du Pont-Neuf (Paris I)

Perspectives

De quoi je vais bien pouvoir vous parler, maintenant ?


Pas compris ? Pas d'accord ? Parlez-en en commentaire.

commentaires

rififi 09/08/2008 23:12

bon alors moi j'ai re-(?)lu les 8 articles.
ben heuuuuu comment dire...
- c'est très bien expliqué (surement :-) )
- et les liens avec des exemples animés de la morkitu-leur-race sont impressionnants de géniosité et de qualité ! (et là même que je dis pas de kônneries) vraiment bravo :-D \o/ \o/ \o/

- mais vraiment je suis une bille :-/
tu vois la tête de l'article 4 ? ben c'est la mienne.
si si, avoue que tu m'avais reconnu
(mais quand même, si tu peux me dire ce que c'est que le "wrapper", je veux bien faire un effort et re-re-lire ;-p )

et au fait, il est où l'article sur l'inondation de 1910 ?
héhéhé...

Aïe mes doigts ! 10/08/2008 11:02


Détendez-vous, chère lectrice.
Lààààààààààà.....
Un peu de café ?
---
Ces articles ne cherchent pas à être un tutoriel, ils supposent déjà une certaine familiarité avec la question, d'avoir buté sur les problèmes. Si tu débutes, tu risques seulement de te décourager
à leur lecture. Le tutoriel du site du Zéro te rendra bien plus de services. Ca m'ennuie de te contredire, mais tu n'es pas une bille :-)
---
Merci du compliment pour les démos, elles m'ont demandé du boulot.
Pour la tête de l'article 4, compliments tu as l'oeil : c'est un autoportrait. Chuis très flatté !
---
"Wrapper" ? Où est-ce que j'emploie un mot pareil ? Ce n'est pas un terme normalisé, rigoureux, etc... juste un nom qui se veut évocateur : "emballage" sans contenu propre. Par exemple le "gros"
div qui en contient plusieurs autres et sert uniquement à leur fournir un cadre.
---
1910, c'est un gros sujet sur lequel je manque de doc pour le moment. Mais ça se fera un jour, sûr !


Maybe 04/04/2008 11:19

M'enfin Brendie:
"De quoi je vais bien pouvoir vous parler, maintenant ?"
On te met sur la piste, quoi, tu vois pas?
De cuisine!! Non de vraie cuisine, pas de cuisine de bloug.(et pas de latin de cuisine hein)
Ha mais.
DBarbel : on craint degun !

Aïe mes doigts ! 05/04/2008 18:13


Aloooors, t'es fière de toi, maintenant ? Pour peine, tu me relis les 8 articles, avec interro à la fin. Non mais !


DBardel 03/04/2008 22:43

Je ne suis pas sûre de très bien comprendre...

Vous mettez des patates dans le millefeuille ? C'est pas un peu lourd ?

DB_un_peu_perplexe...

Aïe mes doigts ! 03/04/2008 23:29


Rraaahhh... bien la peine de se fatiguer à leur confectionner un exposé de haute tenue scientifique et littéraire, pour se retrouver à causer cuisine...................


Maybe 03/04/2008 21:00

Heuuu mouiii Anna....Bon, mettons.
Pan-sur-les-doigts: de rien, de rien, on l'sait bien , va, que tu ne nous hais point.
Et c'est là qu'on s'aperçoit que les nanas, ça a la tête bien plantée sur les zépaules.
Et paf.
(et là tu ripostes: pif)
Bon, en vrai, on pense à ce qu'on n'a pas, quoi...
Anna: tu veux que je t'envoie un cageot de papates?

Anna 03/04/2008 19:23

Meuh non Maybe, il ne s'agit pas d'acheter Emmelle, mais bien de hacher tes hémèles (l'hémèle étant une espèce de pomme de terre assez peu répandue mais très appréciée des geek).
Non mais j'vous jure, faut tout leur apprendre.
;-)
('xcuse moi Brendufat, j'ai pas pu résister. A part ça, comme d'hab, complet, clair, précis, j'adore. :-)

Aïe mes doigts ! 03/04/2008 19:35


Résumé innocent : l'une pense tout de suite au pognon et l'autre à bouffer ? ? Comme vous êtes séduisantes, mesdames ! ---------------------->[exit]


Maybe 03/04/2008 19:09

J'ai rien compris.
Bon, faut dire que j'ai renoncé à lire à l'apparition devant mes zyeux z'éffarés de ces qqes lettres m'enjoignant d'acheter Emmel-le.
D'abord, j'achète pas les gens.
Ensuite, de toute façon, je ne pourrais pas me les offrir.
Enfin, je ne connais pas cet-te Emmel-le, je me méfierais donc, s'il fallait ouvrir porte-pas-de-monnaie, de l'éventuelle tromperie sur une marchandise dont l'utilité me paraît pour le moins incertaine.
Haha.
Non mais.
Je veux mon n'veu.

Archives