Cours IT Bases CSS 028_Float, Positionnement, Alignement

Float

En CSS, le float est une technique de mise en page qui, via la propriété float, fait flotter un élément le long du côté gauche ou droit de son conteneur, permettant aux autres éléments de l’entourer.

Exemple :

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>

Effet : Effet de l'exemple Les éléments flottants peuvent provoquer l’effondrement de la hauteur de l’élément parent, affecter d’autres éléments DIV, et plusieurs éléments flottants sur la même ligne peuvent se chevaucher. La propriété clear est utilisée pour contrôler l’influence entre eux.

Exemple :

1
    .div-left {
2
        float: left;
3
    }
4
    .div-right {
5
        float: right;
6
    }
7
    /* Utiliser la propriété `clear` pour annuler l'influence des éléments flottants
8
     .content {
9
        clear: both;
10
    } */

1
    <div class="div-left">div-left</div>
2
    <div class="div-right">div-right</div>
3

4
    <div class="content">
5
        Ceci est un texte qui sera affecté.
6
    </div>

Effet : Effet de l'exemple Exemple :

1
    .float-left {
2
        float: left;
3
    }
4
    .float-right {
5
        float: right;
6
    }

1
    <img class="float-left" src="zhaojian1.jpg" alt="" srcset="">
2
    <div class="float-right">25 janvier 2024</div><div class="float-right">Titre de l'article Titre de l'article Titre de l'article</div>

Effet :

Effet de l'exemple

Le float était une technique ancienne pour créer des mises en page multi-colonnes, mais dans les mises en page modernes, des techniques plus flexibles comme Flexbox ou Grid sont recommandées.

Positionnement

En CSS, le positionnement fait référence à la définition du mode de positionnement d’un élément via la propriété position, ainsi qu’à la spécification de la position de l’élément par rapport à son ancêtre positionné le plus proche via les propriétés top, right, bottom, left.

Le positionnement est relatif à l’ancêtre positionné le plus proche (position n’est pas static). S’il n’y a pas d’ancêtre positionné, le positionnement est relatif au bloc conteneur initial (généralement l’élément <html>).
Les éléments en positionnement absolu et fixe sont retirés du flux normal du document et peuvent affecter la mise en page des autres éléments.
Les valeurs des propriétés utilisent généralement des pixels (px) ou des pourcentages (%).

Positionnement statique static

Le positionnement statique (Static Positioning) est la valeur par défaut de la propriété position et n’a généralement pas besoin d’être spécifié explicitement. Les éléments en positionnement statique sont disposés normalement dans le flux du document et ne sont pas affectés par les propriétés top, right, bottom, left.

Positionnement initial initial

En CSS, initial est un mot-clé pour réinitialiser la valeur d’une propriété à sa valeur initiale. Pour la propriété position, sa valeur initiale est static. Utiliser position: initial; équivaut à ne pas définir la propriété position.

Positionnement relatif relative

L’élément est positionné par rapport à sa position normale.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        background-color: aquamarine;
5
    }
6
    .relative-example {
7
        position: relative;
8
        top: 100px;
9
        left: 20%;
10
    }

1
  <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> Essayez d'ajouter des br ou d'autres éléments -->
2
  <div class="base relative-example"></div>

Effet : Effet de l'exemple

Positionnement absolu absolute

L’élément est positionné par rapport à son ancêtre positionné le plus proche.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .absolute-example {
6
        position: absolute;
7
        top: 50px;
8
        left: 100px;
9
        background-color: blueviolet;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base absolute-example"></div>

Effet :

Effet de l'exemple

Positionnement fixe fixed

L’élément est positionné par rapport à la fenêtre du navigateur et reste toujours à une position fixe sur l’écran.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .fixed-example {
6
        position: fixed;
7
        bottom: 40%;
8
        left: 40%;
9
        background-color: gold;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
3
    <div class="base fixed-example"></div>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effet :

Effet de l'exemple

Positionnement collant sticky

L’élément devient un positionnement fixe lorsqu’il est défilé à une position spécifique, sinon il est en positionnement relatif.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .sticky-example {
6
        position: sticky;
7
        top: 10%;
8
        left: 40%;
9
        background-color: darkcyan;
10
    }

1
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
2
    <div class="base sticky-example"></div>
3
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
4
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
5
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
6
    <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>

Effet :

Effet de l'exemple

Positionnement hérité inherit

L’élément hérite du mode de positionnement de son élément parent.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .inherit-example {
6
        position: inherit;
7
        top: 100%; /* Attention à la limite */
8
        left: 100%; /* Attention à la limite */
9
        background-color: violet;
10
    }

1
    <div class="base relative-example">
2
        <div class="base inherit-example"></div>
3
    </div>

Effet : Effet de l'exemple

Ordre d’empilement (éléments superposés)

z-index est une propriété CSS pour contrôler l’ordre d’empilement. Elle détermine l’ordre d’affichage d’un élément dans l’empilement vertical, c’est-à-dire quel élément sera devant ou derrière un autre.

La valeur de z-index peut être négative.
Les éléments avec un z-index plus grand recouvriront ceux avec une valeur plus petite.
z-index n’est effectif que sur les éléments positionnés (position n’est pas static).
z-index nécessite que l’opacity de l’élément ne soit pas 0.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
        position: absolute;
5
    }
6
    .z-index-example1{
7
        background-color: red;
8
        z-index: 9;
9
    }
10
    .z-index-example2{
11
        background-color: blue;
12
        z-index: 1;
13
    }

1
    <div class="base z-index-example1"></div>
2
    <div class="base z-index-example2"></div>

Alignement

L’alignement CSS fait référence au contrôle de l’alignement horizontal et vertical des éléments via les propriétés CSS. Les propriétés d’alignement CSS peuvent être appliquées à n’importe quel élément, y compris le texte, les images, les tableaux, les listes, etc.

Les propriétés d’alignement courantes ont les valeurs suivantes :

left : Aligné à gauche
center : Centré
right : Aligné à droite
top : Aligné en haut
middle : Aligné au milieu
bottom : Aligné en bas

Alignement horizontal `text-align`

Utilisé pour définir l’alignement horizontal du contenu textuel dans le cadre de l’élément.

Exemple :

1
.text-center {
2
  text-align: center; /* Centré horizontalement */
3
}
4
.text-left {
5
  text-align: left; /* Aligné à gauche */
6
}
7
.text-right {
8
  text-align: right; /* Aligné à droite */
9
}
10
.text-justify {
11
  text-align: justify; /* Justifié */
12
}

1
  <div class="text-center">Ceci est un texte ABCDE 12345</div>
2
    <div class="text-left">Ceci est un texte ABCDE 12345</div>
3
    <div class="text-right">Ceci est un texte ABCDE 12345</div>
4
    <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>

Effet : Effet de l'exemple

Alignement vertical `vertical-align`

Utilisé pour définir l’alignement vertical des éléments en ligne à l’intérieur d’un élément. Généralement utilisé pour les éléments en ligne et n’a pas d’effet direct sur les éléments de bloc.

Exemple :

1
.base{
2
    height: 150px;
3
}
4
.vertical-align-baseline {
5
    vertical-align: baseline; /* Alignement de base par défaut */
6
}
7
.vertical-align-top {
8
    vertical-align: top; /* Aligné en haut */
9
}
10
.vertical-align-middle {
11
    vertical-align: middle; /* Aligné au milieu */
12
}
13
.vertical-align-bottom {
14
    vertical-align: bottom; /* Aligné en bas */
15
}

1
    <div class="base">
2
        <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">Ceci est un texte ABCDE 12345
3
    </div>
4
    <div class="base">
5
        <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">Ceci est un texte ABCDE 12345
6
    </div>
7
    <div class="base">
8
        <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">Ceci est un texte ABCDE 12345
9
    </div>
10
    <div class="base">
11
        <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">Ceci est un texte ABCDE 12345
12
    </div>

Effet : Effet de l'exemple

Float

Positionnement

Positionnement statique static

Positionnement initial initial

Positionnement relatif relative

Positionnement absolu absolute

Positionnement fixe fixed

Positionnement collant sticky

Positionnement hérité inherit

Ordre d’empilement (éléments superposés)

Alignement

Alignement horizontal text-align

Alignement vertical vertical-align

Commentaires

Alignement horizontal `text-align`

Alignement vertical `vertical-align`