CSS et mise en page - 7 Le pifomètre et l'absolu

24.09.2007

Wéé ! C'est (presque) le dernier épisode ! Avec une démo qui ravale Star Wars au rang de médiocre plagiat de Guignol contre Winnie l'Ourson !

Au menu, le positionnement absolu et les quelques pièges béants qui vont avec. Le sujet ne pardonne pas les idées approximatives (le pifomètre) mais il n'est pas vraiment difficile. De plus j'ai déjà donné pas mal de clés dans l'article précédent, il y aura des redites.

Comme toujours, je vous servirai une tambouille du chapitre 9 et du chapitre 10 de la spécification CSS2, assaisonnée de remarques d'expérience et de quelques animations.

Le positionnement absolu, c'est très simple

Mais si… Quand vous indiquez position:absolute , il se passe deux choses et seulement deux :

d'abord l'élément sort du flux, exactement comme pour display:none : il ne laisse aucune place derrière lui et la suite de la page vient combler le trou.
ensuite l'élément est remis en place à un certain endroit (méfiance…) et par-dessus la page – par-dessus pour dire qu'il masque une partie de la page, pas qu'il se place tout en haut de la fenêtre.

Le positionnement absolu, ça marche jamais

En tout cas, pas toujours du premier coup. Les pépins les plus fréquents sont :

le placement dans la page ; je tenterai de vous exposer proprement la question.
la disparition de tout ou partie de l'élément. Vous verrez qu'il n'y a aucun mystère.

Le placement dans la page, version minimale

Il dépend de la famille top/right/bottom/left, que je baptise coordonnées dans cet article, et subsidiairement des marges. Revue de détail.

Première chose à savoir : si vous n'indiquez aucune coordonnée, l'élément reste à sa place : il ne file ni dans un coin de la page ni en plein centre, non, non, il reste piqué où il est.

Quel intérêt ? Relisez la décomposition du mouvement : il n'y a bien que cet élément qui ne bouge pas. Tout le reste de la page se réorganise comme si l'élément n'était pas là. Expérience idiote mais probante : mettez le bandeau supérieur de mon blog en position:absolute en cliquant ici et remontez voir. Pigé ? Maintenant, si vous vouliez bien tout remettre d'aplomb, je vous en serais très obligé.

Le placement dans la page par les coordonnées

Déjà dit, mais absolu par rapport à quoi ? (que j'aime cette astuce !)

Envoyons l'élément quelque part. C'est le rôle des coordonnées qui punaisent le bord haut (droit, bas ou gauche) de la boîte de l'élément (marges comprises) à une certaine distance du bord haut (droit, bas ou gauche) de… de quoi, au juste ?

Pour votre premier essai, le quoi sera la page – autrement dit l'élément body.

Nouvelle expérience : ici on casse en plaçant le bandeau inférieur à 800 pixels du bord haut et 100 pixels du bord gauche :

 #ln_2 {top:800px; left:100px}

Changez la largeur de fenêtre et observez les changements de place. Quand vous en aurez assez, merci de réparer mon blog.

Ze riteurn euv ze bloc conteneur.

Mais si vous avez déjà joué avec les position, ça se complique. Il faut remonter la chaîne des parents jusqu'au premier ancêtre dont vous avez trafiqué la propriété position (le bloc conteneur, vous vous rappellez ?). C'est le bord de bordure de cet ancêtre qui sert de référence. Au pire, vous remonterez jusqu'au body, ce qui est le cas précédent.

Le placement dans la page par les marges

Quel intérêt, pour un absolu, d'indiquer une coordonnée (top ou bottom, right ou left) et la marge correspondante ? Assez faible : la marge ajoute seulement son effet à la coordonnée.

Prenez l'illustration du coin supérieur gauche des articles. Elle appartient au bandeau supérieur, est en absolu, est dotée d'un top mais ne connaît ni leftni right, seulement une marge gauche négative pour déborder du corps de blog . Si vous étirez la fenêtre, les marges de ce corps de blog changent et l'image accompagne le mouvement.

Mais si l'on n'indique pas la coordonnée (sa valeur par défaut est auto et pas zéro) la marge devient très utile. L'élément, on l'a dit, reste alors à sa place initiale et la marge le décale par rapport à cette place initiale : un peu comme on le ferait avec position:relative sauf que l'élément est déjà en position:absolute. Diabolique, non ? Ce peut être, pour l'ajout d'un petit truc pas trop complexe dont l'emplacement initial est presque bon , un moyen simple de se dispenser de préciser un bloc conteneur.

Deux finesses sur le bloc conteneur

Comprenez bien que préciser position (relative, absolute ou fixed) pour un élément quelconque a deux effets :

direct : la position de l'élément peut changer si on joue sur ses coordonnées ;
indirect : l'élément, déplacé ou non, devient la référence des éléments absolus qu'il peut contenir.

Première observation rigolote : indiquer position:relative sans autre précision n'a aucun effet immédiat sur l'élément concerné ni sur le reste de la page MAIS les éléments absolus qu'il contient seront désormais calés par rapport à sa bordure plutôt que par rapport à la page. Subtil, non ? Ça sert assez souvent.

Deuxième observation, encore plus rigolote : dans la remontée à la recherche du bloc conteneur, les éléments flottants ne comptent pas. Ne comptent pas SAUF si on a trafiqué leur position. Comme leur donner un position:absolute détruirait l'effet de flottage, il arrive qu'on donne un position:relative à un flottant dont on veut faire le cadre de sa descendance absolue . Subtilissime, non ? Limite pathologique, mais peut aussi servir.

Une finesse sur les coordonnées

En pratique, évitez de fixer deux côtés opposés ! Fixez plutôt un seul côté et imposez la largeur ou la hauteur.

Que se produit-il quand on indique ensemble left et right (ou top et bottom) ? Il y a des priorités, des conflits ? C'est prévu : si la largeur widthest laissée libre ( auto ), chaque bord est punaisé sur le conteneur et la boîte s'étire. Si la largeur est imposée, l'une des marges est sacrifiée (voir le précédent article à ce propos, et surtout la spécification). Mais ça c'est la théorie et la réponse dépend des navigateurs. Donc : ça ne sert à rien. Restez à l'écart et souciez-vous plutôt de préciser une largeur et/ou de lire la section suivante.

Une finesse sur la largeur

Sans vouloir me répéter : sauf cas très simple ou exigences très faibles, précisez donc la largeur d'un élément absolu.

Je vous dois un aveu : dans le précédent article consacré aux dimensions, je ne vous avais pas tout dit.

Question : quand on n'impose par la largeur width d'une boîte de bloc (ce qui est tout de même fréquent), que fait le navigateur ?

Réponse générale, déjà donnée : aussi large que possible pour remplir la boîte du parent.

Mais un élément en position:absolute rompt les amarres , au moins pour la géométrie, avec son parent, puisqu'il sort du flux. Alors ?

La réponse officielle est : la largeur de l'élément absolu se réduit à ce qu'il faut pour emballer le contenu. Pas clair ? Tenez, je vous ai préparé ci-dessous un petit encadré très court. Mettez-le en position:absolute. Remettez-le en position:static. Vu ?

Deux mots.

La réponse expérimentale est : ça peut dépendre des navigateurs

Une pause dans le baratin

Ouf ! J'ai fait de mon mieux, mais voilà un petit machin concret pour récapituler le tout.

Y manque un morceau ! (ou carrément tout)

L'autre pépin classique. Je prendrai mes exemples dans les blogs OB, mais le propos est général.

Exemple 1 : on sort un module de sa colonne pour le plaquer ailleurs dans la page. Dès que le module franchit les frontières de la colonne, boum il s'évapore.

Exemple 2 : on veut un menu déroulant de navigation. On lui donne un position:absolute pour le placer commodément et aussi pour qu'il se déroule sans perturber la page, donc par-dessus cette page. On le veut dans toutes les pages du blog, donc on l'insère dans le bandeau supérieur. Tout ceci est parfaitement pensé. Et boum, quand il se déroule le menu passe sous les articles – c'est du moins l'impression qu'on en a.

Si vous greffez un menu à votre bandeau supérieur, pensez donc à ajouter #ln_0 {overflow:visible} dans le CSS pour ne pas devenir fou.

La bonne impression est celle du premier exemple. Il ne s'agit pas d'une question de dessus ou dessous , mais bien de frontières franchies. Autrement dit de débordement. Autrement dit d' overflow. Tadaaaam ! En effet, et on en a déjà parlé, les diverses zones d'un blog OB (les #ln_0, #cl_1_0 e tutti quanti) sont, par défaut, en overflow:hidden : on coupe ce qui déborde, ce qui limite les dégâts visuels chez les bloggeurs maladroits.

En fait, j'ai carrément ajouté ceci :
.ln, .cl {overflow:visible} pour annuler le choix OB par défaut…

Quel rapport avec la choucroute ? Un élément absolu devrait échapper à ces considérations triviales, non ? Puisqu'il sort du flux, ça ne le concerne pas ? Ben non, enfin si : ça le concerne. Il sort du flux, c'est entendu, et se promène à volonté dans la page. Cependant il ne sort pas de l'arborescence du document, ne coupe pas complètement le cordon ombilical avec ses ancêtres, donc reste soumis aux contraintes que ceux-ci peuvent imposer à leur contenu.

Concrètement, dire #ln_0 {overflow:hidden}, comme le fait OB par défaut, signifie que tout ce qui dépasse du bandeau supérieur sera coupé. Relatif, absolu, fixe : veux pas l'savoir ! Même régime pour tout le monde !

De même, si jamais on joue à #ln_0 {display:none}, le bandeau disparaîtra de l'affichage avec tout son contenu, même si ce contenu a été dispersé dans la page à coups de positionnement sophistiqué.

Quant à z-index … la propriété a son utilité, heureusement, il faut simplement ne pas y voir la réponse miracle à tous les pépins d'affichage. D'après mon expérience et les quelques services que j'ai pu rendre, les questions de débordement expliquent beaucoup de choses.

Le positionnement fixe, c'est…

… exactement comme le positionnement absolu, sauf qu'on ne s'embête pas avec le bloc conteneur : le référentiel est la fenêtre du navigateur, point final. Oh, et puis : IE ne fait pas la différence et traite le fixe au mieux comme l'absolu, du moins jusqu'à sa version 6.

Voilà un exposé comme je les aime.

Synthèse en forme de guide de survie

Tout cela fait pas mal de matière à garder en tête. Pour introduire des absolute (ou aussi bien des float qui sont à peine moins traîtres), mieux vaut aller par étapes, une complication après l'autre. On part de l' état de base qui est le flux normal, le positionnement static et on avance d'un état correct à un autre état correct. Ce qui nous donne à peu près ceci

Commencer, si besoin est, par remettre l'élément en position:static et ses marges à zéro.
Élaborer son contenu : texte, couleurs et fond, largeur (pour avoir la paix ensuite), display:block ou inline ou none de certains éléments internes, flottage éventuel de ces mêmes éléments, etc. .
À ce stade, le pavé est toujours à sa place et espéré au point. Vérifier son aspect avec au moins deux navigateurs. En cas de divergence, simplifier et réitérer jusqu'à ce que ça colle. On ne touchera plus ensuite au contenu du pavé ni à la mise en forme de ce contenu.
Mettre le pavé en position:absolute : il sort du flux sans changer de place, la page se réorganise. Vérifier son aspect.
Avant de poursuivre, prévenir une cause de disparition en remontant la chaîne des ancêtres. Si l'un d'eux est en overflow:hidden se demander si ce rognage est vraiment indispensable. S'il ne l'est pas, changer (une fois pour toutes) en overflow:visible. S'il l'est… renoncer ! ou plutôt se débrouiller pour qu'il ne le soit plus, en précisant davantage la géométrie des éléments présents dans l'ancêtre ( frères ou cousins du futur absolu). Préciser la géométrie = imposer des largeurs, éventuellement reporter le overflow:hidden aux niveaux inférieurs, etc. . Vérifier que le blog ne souffre pas de ces changements. Une fois validés, on n'y reviendra plus.
Placer le pavé en hauteur : le plus souvent, top ou bottom sont le moyen le plus commode. Vérifier.
Placer le pavé en largeur, tout dépend de la référence souhaitée. Si c'est la page, left ou right conviennent. Si c'est un des ancêtres, en faire un bloc conteneur par position:relative – mais attention aux effets secondaires sur d'autres absolus déjà présents dans l'ancêtre. Si enfin la référence est la position initiale de l'élément, ne jouer que sur ses marges gauche ou droite. Vérifier.
Si le pavé disparaît sous un autre (un autre absolu le plus souvent), augmenter son z-index . Vérifier.

Le seul point qui demande vraiment réflexion est le choix du bloc conteneur : la page ou un pavé ancêtre ? Vous seul avez la réponse, selon la disposition que vous voulez donner à la page. Critère pratique : quel comportement attendez-vous quand la page s'élargit, que son contenu se réordonne, que certaines marges changent ? L'absolu doit-il rester calé par rapport à la page ou par rapport à autre chose ?

En tout cas, si vous choisissez de vous référer à un ancêtre, que cet ancêtre est encore en flux normal mais contient déjà d'autres absolus, il faudra surveiller ces autres absolus et peut-être rectifier leur placement.

Le grand film !

À une époque j'avais assez spectaculairement remanié la présentation de mes albums photo, et ça m'avait forcé à clarifier mes idées sur le positionnement absolu. Plutôt que de vous infliger un wagon de copies d'écran je vous ai fabriqué cette démonstration pas à pas où nous referons ensemble le travail. Du rire, du frisson, de l'émotion ! Ça vous changera des carrés blancs, rouges, jaunes des autres démos et vous montrera que tout ceci est plus long à expliquer qu'à utiliser.

Note de 2009 : malheureusement les albums photo ne ressemblent plus du tout à ça… n'empêche que je garde ma jolie démo en attendant de trouver une autre idée, na !

Où l'auteur s'efforce d'entretenir le suspense

Il a beaucoup été question de par-dessus dans cet article. Le prochain (et dernier) examinera la manière dont se superposent les boîtes, et plus spécialement la propriété z-index qui est là pour gérer tout ça. Pour une fois, ce ne devrait pas être très long et on aura FI-NI !
* gémissements dans la salle *
* quelques groupies s'arrachent les cheveux, d'autres s'évanouissent *
* le pompier de service, grand bel homme costaud, reprend rapidement la situation en main *
* le mascaron du Pont-Neuf se réserve pour le dernier épisode *

Dimensions et débordement Empilement vertical Premier article