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.

83 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 440 vues
Que mettre dans la balise head
Afin de continuer à faire connaitre votre site pour son référencement nous allons parler du contenu de base dans la balise <head>.La balise <head> joue un rôle essentiel...
Créer son site
3 889 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
19 vues
Portée des variables (variables locales et globales)
La portée des variables en PHP fait référence à la visibilité et à l'accès des variables à différents endroits dans un script PHP. Il existe deux types principaux de portée des variables :...
PHP
133 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
85 vues
Tableaux : création, accès aux éléments, méthodes
Tableaux en JavaScript1. Création de Tableaux :Un tableau en JavaScript est une structure de données permettant de stocker plusieurs valeurs dans une seule variable. Vous pouvez créer un tableau...
JS
110 vues
Utilisation des directives @if, @for, @each, @while pour un contrôle de flux avancé
Utilisation des directives pour un contrôle de flux avancé en SASS1. Directive @if :La directive @if permet d'exécuter un bloc de code conditionnellement en fonction d'une expression booléenne....
Sass
2 730 vues
Créer des listes ordonnées <ol> et non ordonnées <ul>
Créer des listes ordonnées avec <ol> et non ordonnées avec <ul>Les balises <ol> et <ul> sont utilisées pour créer respectivement des listes ordonnées et non ordonnées...
HTML
8 874 vues
Visiter un profil PHP
Pour visiter le profil d'un autre utilisateur il nous faudra récupérer son ID passer en argument dans l'URL par la méthode $_GET et afficher ses informations comme pour...
Créer son site
Publicité
Cette pub permet au site de vivre ...