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.

259 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
2 612 vues
Se connecter en PHP
Nous allons dans cette vidéo créer un formulaire PHP afin de nous connecter à notre site web.Pour cela nous allons utiliser la combinaison mail + mot de passe afin de nous connecter.Nous allons...
Créer son site de rencontres
2 233 vues
Utilisation de PhpMyAdmin pour créer une nouvelle base de données
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Vous serez redirigé vers la page de connexion de...
SQL
1 938 vues
Voir son profil en PHP
Maintenant que vous savez comment voir le profil d'un membre du site nous allons apprendre à concevoir notre profil !
Créer son site de rencontres
587 vues
Sélecteurs de classe : appliquer des styles à des groupes d'éléments spécifiques
Sélecteurs de Classe : Appliquer des styles à des groupes d'éléments spécifiquesLes sélecteurs de classe sont des outils puissants en CSS qui permettent d'appliquer des styles à des groupes...
CSS
3 798 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
4 081 vues
Créer un commentaire
Poster un commentaireDans notre dossier f_forum, nous allons reprendre la page topic.php. Dans cette page nous allons ajouter la possibilité à vos utilisateurs de pouvoir poster des commentaires...
Créer son site
1 356 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
275 vues
Sélecteurs d'attribut : styliser en fonction des attributs des éléments HTML
Sélecteurs d'Attribut : Styliser en fonction des attributs des éléments HTMLLes sélecteurs d'attribut en CSS permettent de cibler des éléments HTML en fonction de la présence ou de la valeur...
CSS
Publicité
Cette pub permet au site de vivre ...