CSS : utiliser les modèles de boîtes simples 2/2

vertical-align

La propriété Vertical-align permet de positionner verticalement d’une boîte inline. Nous l’utilisons très fréquemment pour centrer verticalement un texte au niveau d’une image. Voyons un exemple. Nous aurions pu faire 2 colonnes ci-dessous, une avec l’image, l’autre avec le texte et utiliser Flexbox pour centrer verticalement le contenu de notre seconde colonne. Mais là, on fait super simple, du html de base.

Outre « middle », la proriété vertica-align peut également prendre les valeurs suivantes :

• baseline : c’est la valeur par défaut, l’élément est aligné avec la base de son parent.
• sub : la base d’élément est un peu abaissée comme pour écrire un indice en math.
• super : la base d’élément est un peu relevée comme pour écrire un exposant en math.
• top : le haut de l’élément est aligné avec le haut de la ligne dans laquelle il se trouve.
• text-top : l’élément est aligné avec le haut de la police de l’élément parent.
• bottom : le bas de l’élément est aligné avec le bas de la ligne dans laquelle il se trouve.
• text-bottom : l’élément est aligné avec le bas de la police de l’élément parent.
• length : l’alignement de l’élément est décalé d’une valeur positive ou négative par rapport à la base du parent.
• % : Même fonctionnement que pour length mais l’ajustement se fait par rapport à la line-height (valeurs négatives acceptées).

position

Cette propriété est super pratique et va nous permettre de positionner dans une page web un élément de manière relative ou de manière absolue. Dans ce cas, on la couple avec les propriétés top, bottom, left ou right pour définir sa position. Concentrez-vous, c’est parti !

La propriété positon peut prendre les valeurs suivantes :

• static : c’est la valeur par défaut. L’élément est positionné naturellement dans son flux. Les propriétés top, bottom, left ou right ne s’appliquent pas.
• relative : la position relative est comme la position static MAIS on va pouvoir utiliser top, bottom, left ou right pour décaler l’élément de sa position initiale. Mais ce décalage n’a pas d’influence sur la position des éléments.
• absolute : un élément qui a une position absolue sort du flux normal de la page. S’il n’a aucun parent, il va se positionner par défaut en haut à gauche de votre page HTML. S’il a un parent, il va se positionner par rapport à son plus proche parent qui n’a pas une position égale à static. Top, bottom, left ou right le décaleront par rapport à ce parent.
• fixed : un élément en position fixed est très proche de la position absolue. La seule différence c’est qu’il n’est pas positionné par rapport à un parent proche mais par rapport au viewport, c’est à dire à la fenêtre visible de l’écran. Il sera donc toujours placé au même endroit, même quand on scrolle.
• sticky : c’est un petit mélange entre une position relative et une position fixed. On observe ce comportement avec le sticky header : dans un sticky header, votre zone qui contient la navigation de votre site et le logo si figent pile au moment où vous descendez dans la page en deça du 1er écran. Donc au début, votre élément se positionne naturellement dans le flux de la page. Grâce à sa position relative, il peut se décaler. Son positionnement va se fixer quand on dépasse un certain point. Les propriétés top, bottom, left, right vont permettre de déterminer ce point.

Commençons par visualiser la différence entre une position statique et une position relative. Notre exemple par défaut est le suivant : un titre h3, un 1er paragraphe et un second paragraphe, gras, que nous mettons sur fond gris pour bien identifier l’élément. Dans la colonne de gauche tout s’enchaîne normalement. Dans la colonne de droite, nous avons appliqué une position relative au bloc gris et l’avons décalé de 30px en haut et 30 px à gauche.

z-index

La propriété z-index l’ordre d’empilement / de chevauchement d’un élément par rapport d’autres. Plus la valeur est élevée, plus l’élément se trouve au 1er plan. Notez que le z-index ne concerne que les éléments positionnés, c’est pour ça que nous l’étudions après les positions que nous venons de voir ou les éléments de type Flex.

Les valeur de cette propriété sont simples :

• auto : c’est la valeur par défaut. L’élément a le même ordre de position que son parent.
• numérique : on donne un chiffre au z-index pour le positionner. Les valeurs négatives sont acceptées.

Je pense que vous avez compris l’idée mais voyons un petit exemple quand même. Une image, un texte qui vont passer au 1er ou 2nd plan.

float / clear

Nous allons voir ces 2 propriétés ensemble car elles sont complémentaires.

• Float permet de positionner un élément à droite ou à gauche de son conteneur, en le retirant de son positionnement initial. Ses valeurs sont none ; right ou left.
• Clear permet quant à lui, de définir la position d’un élément (flottant ou non) quand il se trouve après un élément flottant : doit-il se placer à côté ou en-dessous. Ils peut prendre les valeurs : none ; right ; left ou both.

Vous allez mieux comprendre avec nos exemples. La css float est appliquée à l’image pour la positionner par rapport au texte.

clip-path

Cette dernière propriété de la liste, qui remplace la propriété clip, permet de rogner un élément comme vous le souhaitez : il vous reste une zone visible quand le reste est caché ou « clippé ». Vous pouvez rogner la zone selon des formes pré-définies ou via une URL faisant référence à un SVG externe.

Nous allons prendre l’exemple quelques formes pré-définies.