CSS et mise en page - 8 Recette du mille-feuilles

24.09.2007

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 :

ce quelque chose monte au niveau indiqué, comme attendu ;
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é :

la page est un mille-feuilles ;
chaque élément doté d'un z-index définit son propre mille-feuilles ;
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…

Perspectives

De quoi je vais bien pouvoir vous parler, maintenant ?

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

Le positionnement absolu Premier article