Heritiana Antonio

Chapitre 4 : Mise en page avec CSS

Positionnement des éléments

Positionnement statique :

Le positionnement statique est le comportement par défaut des éléments HTML. Ils sont disposés dans le flux normal du document et leur position n’est pas influencée par les propriétés de positionnement CSS.

.element {
    position: static;
}

Positionnement relatif :

Le positionnement relatif permet de déplacer un élément par rapport à sa position normale dans le flux du document. Les propriétés top, bottom, left et right peuvent être utilisées pour ajuster sa position.

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

Positionnement absolu :

Le positionnement absolu permet de placer un élément par rapport à son premier ancêtre positionné ou, à défaut, par rapport au document lui-même. Cela permet de superposer des éléments les uns sur les autres.

.element {
    position: absolute;
    top: 0;
    left: 0;
}

Positionnement fixe :

Le positionnement fixe positionne un élément par rapport à la fenêtre du navigateur, de sorte qu’il reste fixe même lorsque la page est défilée.

.element {
    position: fixed;
    top: 0;
    left: 0;
}

Modèles de boîtes CSS

Marges :

Les marges définissent l’espace autour d’un élément. Elles peuvent être spécifiées individuellement pour chaque côté de l’élément (haut, droite, bas, gauche) ou sous forme d’une seule valeur pour tous les côtés.

.element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

Bordures :

Les bordures entourent le contenu d’un élément et peuvent être définies individuellement pour chaque côté ou sous forme d’une seule valeur pour tous les côtés.

.element {
    border: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

Rembourrages :

Les rembourrages définissent l’espace entre le contenu d’un élément et ses bordures. Comme les marges, ils peuvent être spécifiés individuellement pour chaque côté ou sous forme d’une seule valeur pour tous les côtés.

.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

Largeur et hauteur :

Les propriétés width et height définissent respectivement la largeur et la hauteur d’un élément.

.element {
    width: 100px;
    height: 100px;
}