Propriété CSS : position
La propriété position en CSS permet de contrôler la manière dont un élément est placé
dans la page. Elle détermine comment l’élément est positionné par rapport à son conteneur
ou à la fenêtre.
1. position: static
• C’est la valeur par défaut. L’élément suit le flux normal du document.
Exemple :
div {
position: static;
}
➢ Remarque: les propriétés top, left, bottom et right n’auront aucun effet sur les
éléments positionnés avec position: static.
2. position: relative
• L’élément reste dans le flux normal, mais on peut le déplacer avec top, left, right, bottom.
Exemple :
div {
position: relative;
top: 10px;
left: 20px;
}
3. position: absolute
• L’élément est retiré du flux et positionné par rapport à son parent positionné (non-static).
Exemple :
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
4. position: fixed
• L’élément est fixé par rapport à la fenêtre. Il reste visible même lors du défilement.
Exemple :
header {
position: fixed;
top: 0;
width: 100%;
}
5. position: sticky
• L’élément se comporte d’abord comme relatif, puis devient fixe lorsqu’il atteint une
position donnée.
Exemple :
h1 {
position: sticky;
top: 10px;
}
Propriété CSS : display
1. Introduction
La propriété CSS display définit la manière dont un élément HTML est affiché dans la page.
Elle influence le flux, l’alignement et la structure du document.
2. Valeurs principales de display
2.1 display: block
• L’élément occupe toute la largeur disponible.
• Commence toujours sur une nouvelle ligne.
• Exemple :
<div style="display: block; background: lightblue;">Bloc 1</div>
<div style="display: block; background: lightgreen;">Bloc 2</div>
2.2 display: inline
• L’élément n’occupe que la largeur nécessaire.
• Ne commence pas sur une nouvelle ligne.
• Les propriétés width et height ne fonctionnent pas.
• Exemple :
<span style="display: inline; color: red;">Texte rouge</span>
<span style="display: inline; color: blue;">Texte bleu</span>
2.3 display: inline-block
• Fusion entre inline et block.
• N’occupe que la place nécessaire mais accepte width et height.
• Exemple :
<div style="display: inline-block; width: 100px; height: 50px; background: orange;"></div>
<div style="display: inline-block; width: 150px; height: 60px; background: purple;"></div>
2.4 display: flex
• Active Flexbox.
• Permet d’aligner facilement des éléments en ligne ou en colonne.
• Exemple :
<div style="display: flex; gap: 10px;">
<div style="background: pink; width: 50px; height: 50px;"></div>
<div style="background: cyan; width: 50px; height: 50px;"></div>
<div style="background: yellow; width: 50px; height: 50px;"></div>
</div>