Overflow

La propriété overflow pourrait se traduire en québécois par "ce qui dépasse". Cette propriété permet de spécifier comment un élément devrait se comporter lorsqu'un enfant dépasse son cadre.

Examinons les valeurs les plus courantes:

• visible (valeur par défaut) même si un enfant dépasse, celui-ci reste entièrement visible.
• hidden si une partie d'un enfant dépasse, celle-ci est masquée.
• auto si une partie d'un enfant dépasse, le parent la masquera, mais affiche des barres de défilement permettant de le voir en entier.
• scroll est identique à auto, mais affiche toujours les barres de défilement, peu importe si un enfant dépasse ou non.

Comparons l'impact de cette propriété lorsqu'un enfant, le carré bleu, dépasse verticalement de son parent, le carré vert.

La propriété overflow ne fonctionne que sur les parents aillant une position autre que static.

ERREUR FRÉQUENTE

La propriété overflow doit être appliquée sur l’élément contenant l’élément dépassant et NON sur l’élément dépassant directement. overflow overflow overflow-x & overflow-y

Ces propriétés fonctionnent de façon identique à overflow. Cependant, elles n'affectent qu'un seul axe, x ou y, comme leur nom l'indique.

overflow-x overflow-x overflow-y overflow-y

EXERCICE Overflow - Éclipses Pour cet exercice, vous devez compléter une mise en page illustrant différents stades d’une éclipse solaire.