float-position

CSS : position, float

Outre le posi­tion­ne­ment par défaut des élé­ments HTML dans la page, c’est à dire les uns à la suite des autres, des pro­prié­tés CSS par­ti­cu­lières per­mettent d’influer sur ces prin­cipes de mise en page de base.

On spé­ci­fie le type de posi­tion­ne­ment en uti­li­sant la pro­priété CSS posi­tion.

Pour d’autre cas spé­ci­fiques, nous uti­li­se­rons la pro­priété float.

Posi­tion­ne­ment par défaut

Apercu

Chaque bloc se situe l’un en des­sous de l’autre, sur une nou­velle ligne. Le posi­tion­ne­ment par défaut cor­res­pond à sta­tic

CSS

.lenomdemonattribut{position : static}

Exemple

Télé­char­ger le code

Posi­tion­ne­ment relatif

Apercu explications

Ce type de posi­tion­ne­ment déplace l’élément de sa posi­tion par défaut en le dépla­çant, vers le haut, vers le bas, vers la droite ou la gauche de l’emplacement où il se trou­vait. Cette pro­priété n’affecte pas la posi­tion des élé­ments envi­ron­nants qui res­tent à leur posi­tion par défaut. Dans l’exemple ci-dessous, l’élément est déplacé de 10 pixels à par­tir de la gauche par rap­port à sa posi­tion ini­tiale, et de 20 pixels à par­tir du haut par rap­port à sa posi­tion initiale.

Nous pou­vons uti­li­ser (top, bot­tom, left, right) pour indi­quer le type de déca­lage que nous vou­lons appli­quer à l’élément. Les valeurs de ces pro­prié­tés sont en pixels, pour­cen­tage ou em.

CSS

.lenom­de­mo­nat­tri­but{ posi­tion : rela­tive; left:10px; top:20px; }

Exemple

Télé­char­ger le code

Posi­tion­ne­ment absolu

Apercu explications

Ce type de posi­tion­ne­ment place l’élément en fonc­tion de l’élément qui le contient. Il est extrait du flux de la page (c’est à dire que les élé­ments qui le pré­cèdent et le suivent – ils se com­portent comme s’il était absent). Dans le cas que nous allons voir, on déplace l’élément de 10 pixels à par­tir de la gauche par rap­port à l’éléméent qui le contient (dans notre cas body), et de 200 pixels à par­tir du haut par rap­port à l’éléméent qui le contient (dans notre cas body).

CSS

.lenom­de­mo­nat­tri­but{ posi­tion : abso­lute; left:10px; top:200px; }

Exemple

Télé­char­ger le code

Posi­tion­ne­ment fixe

Apercu explications

Ce type de posi­tion­ne­ment place l’élément en fonc­tion de la fenêtre du navi­ga­teur. Les élé­ments avec un posi­tion­ne­ment fixe n’affectent pas les élé­ments envi­ron­nants. Il est extrait du flux de la page (c’est à dire que les élé­ments qui le pré­cèdent et le suivent – ils se com­portent comme s’il était absent). Cet élé­ment ne bou­gera pas quand l’internaute uti­li­sera l’ascenseur. Le cas que nous voyons déplace l’élément de 10 pixels à par­tir de la gauche par rap­port à la fenêtre du navi­ga­teur, de 10 pixels à par­tir de la droite par rap­port à la fenêtre du navi­ga­teur et de 200 pixels à par­tir du haut par rap­port à la fenêtre du navigateur

CSS

.lenom­de­mo­nat­tri­but{ posi­tion : fixed; left:10px; top:200px; right:10px;}

Exemple

Télé­char­ger le code

Élé­ments flottants

1 élé­ment flottant

Apercu

Faire flot­ter un élé­ment per­met de l’extraire du posi­tion­ne­ment par défaut et de le posi­tion­ner le plus à droite ou le plus à gauche de la boîte conte­nante où le texte et les élé­ments en-ligne se répar­ti­ront autour de lui.. L’élément flot­tant devient un élé­ment de type bloc autour duquel flottent les autres élé­ments. Dans notre cas, nous fai­sons flot­ter l’élément à gauche et lui don­nons une lar­geur de 200 px. L’autre pos­si­bi­lité pour la pro­priété float est l’argument right.

Exemple

CSS

.lenom­de­mo­nat­tri­but{ float:left; width:200px;}

Télé­har­ger le code

2 élé­ments flottants

apercu

Nous pou­vons éga­le­ment spé­ci­fier la pro­priété sur plu­sieurs éléments.

La feuille de style reste inchangée.

CSS

.lenom­de­mo­nat­tri­but{ float:left; width:200px;}

HTML

Le HTML, quant à lui, se retrouve avec 2 para­graphe avec la class cor­res­pon­dante, c’est à dire :

<p class=”lenomdemonattribut”>…</p>

<p class=”lenomdemonattribut”>…</p>

Exemple

Télé­char­ger le code

Super­po­si­tion

Quand nous uti­li­sons un posi­tion­ne­ment fixed, rela­tive ou abso­lute les élé­ments peuvent se super­po­ser. Si c’est le cas, les élé­ments appa­rais­sant plus loin dans le code HTML se super­posent au des­sus de ceux qui sont écrits avant.

Pour contrô­ler quel élé­ment est au-dessus de l’autre, il faut uti­li­ser la pro­priété z-index. La valeur d’une pro­priété z-index est un nombre sans unité. Plus le chiffre est grand plus l’élément sera au-dessus de l’autre. Si je donne une pro­priété de z-index égale à 1 pour un élé­ment A et une valeur de 4 au z-index d’un élé­ment B, alors l’élément B sera au-dessus de l’élément A.

CSS

.lenom­de­mo­nat­tri­but {z-index:100;}

Pour aller plus loin

2 autres exemples :

apercuun menu latéral

Télé­char­ger le code

apercu3 colonnes + paragraphes

Télé­char­ger le code

0