CSS

Positionnement statique, relatif, absolu et fixe

Positionnement Statique, Relatif, Absolu et Fixe en CSS


En CSS, le positionnement des éléments peut être contrôlé en utilisant différentes propriétés. Les quatre types de positionnement les plus courants sont : statique, relatif, absolu et fixe. Chacun de ces types de positionnement a un comportement spécifique qui influence la manière dont les éléments sont disposés sur la page.


1. Positionnement Statique :


  • Par défaut, tous les éléments HTML ont un positionnement statique.
  • Avec le positionnement statique, l'élément est placé selon l'ordre normal du flux de la page.
  • Les propriétés de positionnement (top, right, bottom, left) n'ont aucun effet sur les éléments positionnés statiquement.


.static {
    position: static;
}


2. Positionnement Relatif :


  • Avec le positionnement relatif, l'élément est déplacé par rapport à sa position normale dans le flux de la page, mais conserve l'espace qu'il occupe dans le flux.
  • Les propriétés de positionnement (top, right, bottom, left) définissent le décalage par rapport à la position normale de l'élément.


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


3. Positionnement Absolu :


  • Avec le positionnement absolu, l'élément est positionné par rapport à son premier ancêtre positionné, autrement dit, un élément qui a un positionnement autre que statique (relatif, absolu ou fixe).
  • L'élément est retiré du flux normal du document et ne laisse pas d'espace vide à sa place.


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


4. Positionnement Fixe :


  • Avec le positionnement fixe, l'élément est positionné par rapport à la fenêtre du navigateur, indépendamment du défilement de la page.
  • Comme pour le positionnement absolu, l'élément est retiré du flux normal du document.


.fixed {
    position: fixed;
    top: 10px;
    right: 10px;
}


Impact sur le Positionnement :


  • Le positionnement statique suit le flux normal du document.
  • Le positionnement relatif déplace l'élément par rapport à sa position normale dans le flux.
  • Le positionnement absolu et fixe retirent l'élément du flux normal du document et le positionnent par rapport à un ancêtre positionné ou la fenêtre du navigateur, respectivement.


Conseils pour une Utilisation Efficace :


  • Choisissez le type de positionnement en fonction de vos besoins spécifiques en termes de mise en page et de comportement.
  • Utilisez le positionnement absolu et fixe avec précaution, car ils peuvent entraîner des problèmes d'accessibilité et de superposition d'éléments.


En résumé, le positionnement statique, relatif, absolu et fixe en CSS offre une flexibilité pour contrôler la disposition des éléments sur une page Web. En comprenant comment chaque type de positionnement fonctionne, vous pouvez créer des mises en page efficaces et esthétiques pour votre site Web.

239 vues
Posté le 22 avril 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
4 158 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
1 827 vues
Afficher et envoyer les messages
Dans cette nouvelle vidéo nous allons afficher les messages entre vous et un autre utilisateur.Nous allons également créer un formulaire afin d'envoyer de nouveaux messages à l'utilisateur avec...
Créer son site de rencontres
285 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
2 674 vues
Mettre son site en ligne
Maintenant que vous avez développé votre propre site il est temps qu'il prenne son envole afin d'atterrir dans nos navigateurs (ex : google, bing, etc.) 😁👌Donc à partir de maintenant vous...
Créer son site
185 vues
Les callbacks
Les Callbacks en JavaScriptLes callbacks sont des fonctions passées en tant qu'arguments à d'autres fonctions, qui seront exécutées ultérieurement ou de manière asynchrone. Les callbacks sont...
JS
17 928 vues
Mot de passe oublié en PHP
Il arrivera souvent qu'un utilisateur oublie son mot de passe. Pour y remédiez nous allons modifier notre base de données avec un nouveau paramètre nous permettant de savoir si...
Créer son site
1 836 vues
Nesting : Organiser le code CSS en utilisant le nesting pour des sélecteurs imbriqués
Nesting en SASS : Organiser le code CSS avec des sélecteurs imbriqués1. Utilisation du nesting :En SASS, vous pouvez organiser votre code CSS en utilisant le nesting pour des sélecteurs...
Sass
296 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
Publicité
Cette pub permet au site de vivre ...