Chapitre 6 : Positionnement et affichage

Maîtrisez les différentes techniques de positionnement et d'affichage des éléments en CSS.

1. La propriété `display`

Contrôle la façon dont un élément est affiché dans le flux du document.

block : l'élément occupe toute la largeur (ex : <div>)
inline : l'élément est intégré dans une ligne (ex : <span>)
inline-block : hybride, comme inline mais accepte width/height
none : masque complètement l'élément

p {
                          display: inline-block;
                        }
                    

2. La propriété `position`

Détermine le mode de positionnement d'un élément dans la page.

static (par défaut) : flux normal
relative : positionné par rapport à sa position normale
absolute : positionné par rapport à l'élément parent le plus proche en positionné
fixed : positionné par rapport à la fenêtre
sticky : reste fixe quand on fait défiler (selon un seuil)

Exemple :

.bloc {
                          position: absolute;
                          top: 50px;
                          left: 100px;
                        }
                    

4. Affichage et centrage

4.1 Centrer horizontalement un bloc

div {
                          width: 300px;
                          margin: 0 auto;
                        }
                    

4.2 Centrer verticalement avec flexbox

.container {
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          height: 100vh;
                        }
                    

5. Visibilité

visibility permet de masquer un élément sans le retirer du flux :

visible
hidden

.menu {
                          visibility: hidden;
                        }
                    

6. Bonnes pratiques

Utiliser relative pour les décalages simples
Préférer flexbox pour centrer plutôt que du positionnement complexe
Ajouter un position: relative au parent d'un élément en absolute

7. À éviter

Utiliser position: absolute sans parent positionné
Multiplier les z-index sans gestion claire
Utiliser display: none pour cacher des éléments accessibles au clavier (préférer visibility)

8. Exercice pratique

Objectif : Positionner une étiquette "Promo" sur un bloc produit.

Consignes :

Créer une <div class="produit"> contenant une image et une étiquette promo
Utiliser position: relative sur le conteneur
Utiliser position: absolute pour placer l'étiquette en haut à droite

Exemple CSS :

.produit {
                          position: relative;
                          width: 250px;
                        }
                        

.promo {
                          position: absolute;
                          top: 10px;
                          right: 10px;
                          background: red;
                          color: white;
                          padding: 0.2em 0.5em;
                          font-size: 0.9em;
                        }
                    

HTML :

<div class="produit">
                          <img src="produit.jpg" alt="Produit">
                          <div class="promo">Promo</div>
</div>

9. À retenir

display définit le type d'affichage (block, inline...)
position permet de sortir un élément du flux normal
Le positionnement est essentiel pour créer des interfaces fluides