Les positions

En CSS, il est possible de placer un élément n'importe où dans le document peut importe l'endroit où il est déclaré en HTML. Par exemple, si dans le code HTML nous avons déclaré deux balises <div> qu'on retiendra pas les noms div1 et div2 de telle sorte à ce que la div1 soit déclarée avant la div2, alors il est logique que quand on affichera le résultat sur le navigateur, la div1 sera placée avant la div2.

Avec les propriétés CSS qui gèrent les positions, et sans toucher au code HTML, on peut mettre la balise div1 après la balise div2, voir on peut les superposer de telle sorte que l'une survole l'autre etc...

La propriété position permet de rendre l'ordre d'affichage des objets indépendant de l'ordre de leur déclaration en HTML. Elle peut avoir plusieurs valeurs:

• static: Il s'agit de al valeur par défaut qui n'applique aucun positionnement particulier à l'objet et celui-ci est intégré normalement à l'emplacement décrit par le flux.
• absolute: Cette valeur permet de rendre la position de l'objet absolue. On peut donc l'afficher n'importe où, mais ce n'est pas tout. Le faire de déclarer le style position:absolute sur un objet, procure à celui ci la possibilité de survoler les autres objets. Il peut donc cacher un texte ou une image totalement ou partiellement selon l'endroit exacte où on l'a placé.
• relative: Cette valeur permet de décaler l'affichage d'un objet par rapport à son emplacement naturel (celui décrit par HTML).
• fixed: Cette valeur permet de fixer un élément sur la page même si celle ci est défilée à l'aide des barres de défilement.
• sticky: Il s'agit d'une position qui alterne entre static et fixed. Si on spécifie la propriété top à l'objet positionné en sticky, alors tant que sa position verticale est supérieure à la valeur spécifiée il est statique, et s'il passe en dessous de cette valeur alors il devient fixed.

Pour pouvoir placer les objet là on l'on souhaite, il faut en plus de la propriété position utiliser d'autre propriétés CSS qui permettent de spécifier les coordonnées. De cette manière on peut déclarer avec précision l'emplacement de chaque objet auquel on a appliqué la propriété position.

Le système de coordonnées

Quand on parle de coordonnées, on pense à un repère. Le repère n'est en fait rien d'autre que l’écran de l'utilisateur (ou la fenêtre du navigateur pour être plus précis). L'origine du repère n'est pas (tel qu'on la appris en Mathématiques) le coin bas à gauche, mais le coin haut à gauche du navigateur. Le sens positif horizontalement est vers la droite et verticalement vers le bas. Pour spécifier le x et le y on fait appel aux propriétés CSS left, top, right et bottom.

• left: exprime le nombre de pixels qui séparent l’extrémité gauche de l'objet du coté gauche du navigateur.
• top: exprime le nombre de pixels qui séparent l’extrémité supérieure de l'objet du haut du navigateur.
• right: exprime le nombre de pixels qui séparent l’extrémité droite de l'objet du coté droit du navigateur.
• bottom: exprime le nombre de pixels qui séparent l’extrémité inférieure de l'objet du bas du navigateur.

Simple non?
Voilà une figure qui résume cela:



Exemple:
Avec ce code, si du texte (ou autre contenu) était déjà à l'emplacement indiqué par les coordonnées, alors il serait caché par la balise <div>.
Imaginez maintenant que nous disposons de deux balises <div>. Toutes les deux ont une position absolue, et les coordonnées spécifiées en CSS les mèneront à se croiser (l'une survolera l'autre totalement ou partiellement). Laquelle sera en dessus de l'autre? (ou plutôt, laquelle cacherait l'autre?)

Par défaut, la dernière qui a été déclarée en HTML sera placée en dessus. C'est logique après tout. Mais CSS renferme une propriété qui permet de changer cela sans toucher au HTML. C'est l'axe des Z, ou l'axe virtuel qui sort de l'écran.

Propriété z-index

La propriété z-index permet de spécifier la valeur Z sur l'axe (virtuel) sortant de l'écran. Il a comme valeur un nombre entier. Plus la valeur de z-index est grande plus l'objet est placé au premier plan.

Exemple:
Dans ce cas, quelque soit l'ordre de déclaration des objet dans le code HTML, la balise <nav> sera en dessus de la balise <section>.

Transformation des éléments

Vous vous souvenez probablement des éléments inline et block. En guise de rappel, les éléments de type inline occupent juste assez d'espace pour qu'ils s'affichent correctement. Par exemple la balise <span> est de type inline. Elle n'engendre pas de retour à la ligne automatique car elle se contente de l'espace nécessaire pour que ce qu'elle contient (texte ou autre objet) s'affiche convenablement. C'est le cas pour les balises <b>, <i>, <img>...

Les balises de type block constituent un "bloc". Comme la balise <div> elle occupe toute la largeur de la page même si son contenu n'est pas aussi large. C'est ce qui explique le retour à la ligne automatique qui survient avant et après ce type de balises. Les balises <header>, <footer>, <p> et bien d'autres font aussi partie de cette famille.

Pour mieux voir la différence entre les deux familles, appliquons leurs des arrière plan et voyons ce que cela donne.

Code HTML:
Code CSS:
Le résultat est:
Vous voyez maintenant que les balises inline ont un arrière plan qui s'étale juste sur la larguer du contenu alors que pour les block l'arrière plan s'allonge jusqu'à la fin de la ligne.

Choisissons maintenant une balise de chaque famille et essayons de modifier leur largeur et leur hauteur.

Code HTML:
Code CSS:
Voilà ce que ça donne:
Ce n'est pas à quoi vous attendez? En effet, c'est tout à fait normal. Seules les balises de type block sont redimensionnables. Les balises inline ignorent les style de redimensionnement à l'exception des images et les champs de formulaire.

Propriété display

Heureusement, CSS a plus d'un tour dans son sac. Il a prévu des styles qui transforment les balises, c'est à dire qu'on peut rendre la balise <span> de type block et la balise <div> de type inline et cela s'applique sur toutes les balises HTML. La propriété magique qui rend cet exploit possible s'appelle display.

La propriété display peut accueillir les valeurs suivantes:

• inline: permet de transformer une balise HTML en type inline.
• block: permet de transformer une balise HTML en type block.
• none: permet de faire disparaître l’élément HTML. L’élément aura l'air comme s'il n'a pas été déclaré dans le code HTML.
• inline-block: cette valeur a été introduite en CSS3. Elle permet de réunir les principales caractéristiques de chacune des types inline et block. Si on applique la propriété display:inline-block à un élément, il n'engendre pas de retour automatique à la ligne (comme les inline), et peut être redimensionné (comme les block).

On va modifier le dernier code pour mettre en pratique la transformation des éléments.

Code HTML:
Code CSS:
Voilà ce que ça donne:

Propriété float

Nous avons vu dans la dernière partie qu'on peut rendre les balises block des inline et inversement, mais leur ordre de déclaration sera respecté lors de l'affichage (à moins d'utiliser la propriété position). Cependant, il existe une autre méthode qui permet de ne pas toujours respecter l'ordre de déclaration des éléments lors de l'affichage (dans le jargon de HTML/CSS on parle de faire sortir l'élément du flux normal). Il s'agit de la propriété float.

Pour comprendre le principe, mieux vaut un exemple.

Supposons que nous voulons afficher un grand titre, suivi d'un long texte suivi par une image. Le code HTML serait des plus simples:
Le résultat après exécution ressemblera à cela:
Appliquons maintenant la propriété float à l'image (sans toucher le code HTML). Le code CSS ressemblerai à ceci:
Si on exécute le dernier code on aura ce résultat:
C'est ça ce que l'on appelle retirer l'élément du flux normal. En effet, dans le flux normal, l'image est censée s'afficher en bas comme pour le premier exemple. Mais avec le style float:left l'image est placée au début à gauche, et tout les autres éléments (grand titre et texte) sont répartis autour.

La propriété float peut accueillir les valeurs suivantes:

• left: l'objet flotte à gauche et les autres éléments se répartiront autour.
• right: l'objet flotte à droite et les autres éléments se répartiront autour.
• none: aucun flottement n'est appliqué.

Il faut savoir que le propriété float est la coqueluche des intégrateurs. Elle facilite tellement la mise en page d'un document HTML. Dans ce site d'ailleurs je l'ai utilisé à plusieurs reprises. Cependant, des fois elle donne des résultats imprévisibles car tout le contenu restant sera influencé par l'élément flottant et poursuivra son écoulement à droite ou à gauche du flottant au long de sa hauteur. Pour palier ce problème on fait appel à une autre propriété. J'ai nommé clear.

Propriété clear

La propriété clear sert à annuler l'effet d'un élément flottant sur l'élément sur laquelle elle est appliquée. Elle peut avoir comme valeur:

• left: cesse l'effet d'un flottant à gauche (float:left) sur l'élément courant.
• right: cesse l'effet d'un flottant à droite(float:right) sur l'élément courant.
• both: cesse l'effet d'un flottant à gauche ou à droite (float:left ou float:right) sur l'élément courant. C'est d'ailleurs la valeur la plus utilisée.

Propriété vertical-align

La propriété vertical-align définit l'alignement vertical d'un élément de type inline ou d'une cellule d'un tableau. Elle peut accepter plusieurs valeurs dont voici les plus utiles:

• baseline: C'est la valeur par défaut, elle aligne la base de l'élément avec la base du texte contenu dans son parent.
• top: Aligne le haut de l'élément avec le haut du texte contenu dans son parent. Dans le cas d'un tableau, il aligne l’élément en haut de la cellule.
• bottom: Aligne le bas de l'élément avec le bas du texte contenu dans son parent. Dans le cas d'un tableau, il aligne l'élément en bas de la cellule.
• middle: Aligne le milieu de l'élément avec le milieu du texte (considéré en minuscules) contenu dans son parent. Dans le cas d'un tableau, il centre verticalement l'élément dans la cellule.

Exemple:

Code HTML:
Code CSS:
Ce qui donne le résultat:

Flottement et positionnement des éléments en vidéo