Positionnement CSS : votre guide ultime pour le placement des éléments

Bonjour les gens incroyables, bienvenue sur mon blog ! ?

Que vous soyez un développeur chevronné ou que vous vous familiarisiez simplement avec CSS, cet article vous donnera des connaissances supplémentaires et des exemples !

Introduction au positionnement CSS

Le positionnement CSS détermine où un élément apparaîtra dans le flux de documents. Par défaut, tous les éléments suivent le flux naturel de gauche à droite et de haut en bas, appelé positionnement statique

. Cependant, CSS propose quatre autres modes de positionnement qui permettent un contrôle plus créatif sur le placement des éléments.

Positionnement statique - Le comportement par défaut

Quand un élément a la position : static (la valeur par défaut), il est positionné selon le flux normal* de la page. Considérez-le comme des éléments alignés les uns après les autres, sans attention particulière à leur placement au-delà de la structure naturelle du document.

Exemple :

.static-element { position: static;}

Flux normal : les éléments sont disposés les uns après les autres, de gauche à droite, de haut en bas, à moins qu'ils ne soient modifiés par des flotteurs, une flexbox ou une grille.

?Bon à savoir

:

• Éléments de bloc

   : ils s'empilent verticalement, chaque nouvel élément commençant en dessous du dernier.

• Éléments en ligne

   : ils s'écoulent horizontalement, n'occupant que la largeur requise par leur contenu.

Positionnement relatif - Un changement de perspective

Le Positionnement relatif

déplace un élément par rapport à sa position normale sans modifier la disposition autour de lui. C'est comme déplacer un élément un peu de son emplacement d'origine tout en réservant son espace dans le flux de documents.

Exemple :

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?Bon à savoir

 : Le positionnement relatif est simple mais souvent mal compris :

• Conserve l'espace

   : L'espace d'origine de l'élément dans la mise en page est préservé.

• Décalage

   : utilisez haut, droite, bas, gauche pour le décaler de sa position normale.

Positionnement Absolu - L'Esprit Libre

Le Positionnement absolu

supprime entièrement un élément du flux documentaire. Il le positionne ensuite par rapport à son ancêtre positionné le plus proche ou, s'il n'y en a pas, au bloc conteneur initial (généralement l'élément ).

Exemple :

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

?Bon à savoir :

<script> // Detect dark theme var iframe = document.getElementById('tweet-1848997429565149264-1'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1848997429565149264&theme=dark" } </script>

• Supprimé du flux : cela n'affecte pas les positions des autres éléments.
• Par rapport à l'ancêtre positionné : Si aucun ancêtre n'est positionné, il se rapporte au bloc conteneur initial (généralement ).

Positionnement fixe - Épinglé à l'écran

Les

Les éléments avec un positionnement fixe sont positionnés par rapport à la fenêtre. Ils ne bougent pas lorsque la page défile, ce qui les rend parfaits pour des éléments tels que les barres de navigation ou les fenêtres contextuelles.

Exemple :

.static-element { position: static;}

?Bon à savoir :

• Ne défile pas : ils restent en place, ignorant la position de défilement, ce qui est idéal pour les en-têtes ou les notifications.

Positionnement collant - Adaptation au défilement de l'utilisateur

Le

Positionnement collant commence avec le flux comme statique mais peut devenir fixe lorsqu'un seuil de défilement est atteint. C'est idéal pour les en-têtes que vous souhaitez rester visibles pendant le défilement.

Exemple :

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

?Bon à savoir :

• Démarre statique : jusqu'à ce qu'il atteigne son seuil, il devient alors fixe.

Incompréhensions et astuces courantes

• Utilisation excessive du positionnement absolu : bien que puissant, l'utilisation excessive du positionnement absolu peut entraîner des problèmes de mise en page, en particulier avec le contenu qui se redimensionne ou lorsque les éléments se chevauchent de manière inattendue.
• Z-Index avec positionnement : N'oubliez pas que les éléments positionnés peuvent utiliser le z-index pour contrôler l'ordre d'empilement, mais le z-index ne fonctionne qu'avec les éléments positionnés.
• Performances avec les éléments fixes : trop d'éléments fixes peuvent avoir un impact sur les performances, en particulier sur les appareils mobiles où les éléments fixes peuvent ne pas être redistribués correctement.
• Défilement et éléments fixes : Soyez prudent avec les éléments fixes qui pourraient couvrir le contenu. Fournissez toujours aux utilisateurs un moyen d'interagir avec la page derrière ces éléments.

Un exemple pratique

Créons une mise en page qui illustre chaque type de positionnement.

?Retrouvez également l'exemple sur CodePen.

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

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

Cet exemple présente chaque méthode de positionnement en action. Vous remarquerez comment les éléments se comportent différemment lorsque vous faites défiler ou redimensionnez la fenêtre.

Techniques avancées et considérations

• Z-Index : Pendant que nous l'avons mentionné, approfondissons un peu. Z-index ne fonctionne que sur des éléments positionnés (relatifs, absolus, fixes), et les contextes d'empilement peuvent compliquer son comportement.
• Combinaison de positions : Parfois, un élément peut nécessiter un positionnement à la fois relatif et absolu à des fins différentes

• Conception réactive : réfléchissez au comportement des différentes positions selon les tailles d'écran. Le correctif peut couvrir du contenu important sur des écrans plus petits.

• Accessibilité : assurez-vous que les éléments fixes ou collants n'obstruent pas les lecteurs d'écran ou la navigation au clavier.

Pratiquez-vous avec des applications du monde réel

Si vous souhaitez mettre en pratique vos compétences, vous pouvez essayer de les développer :

• Éléments de navigation : en-têtes ou pieds de page fixes ou collants.
• Tooltips ou Modals : positionné de manière absolue par rapport à un conteneur parent.
• Effets de parallaxe : combinaison d'arrière-plans à position fixe avec du contenu défilant.

En-têtes collants et plus ~ Exemple

Voici un exemple qui montre des éléments de navigation (en-tête fixe, pied de page collant), des info-bulles (positionnées de manière absolue) et un simple effet de parallaxe :

?Retrouvez l'intégralité du code et vérifiez le résultat sur Codepen.

Techniques de positionnement CSS ~ Exemple

L'exemple que vous pouvez voir ci-dessous montre différentes techniques de positionnement CSS utilisant HTML et CSS.

?Retrouvez l'intégralité du code et vérifiez le résultat sur Codepen.

.static-element { position: static;}

• En-tête fixe :
  
  Démontre la position : corrigée, ce qui maintient l'en-tête en haut de la fenêtre quel que soit le défilement.

• Élément statique :
  
  Affiche le positionnement par défaut là où les éléments apparaissent dans le flux de documents normal.

• Éléments relatifs et absolus :
  
  La boîte relative est un conteneur avec un positionnement relatif, et à l'intérieur se trouve un élément positionné de manière absolue. Cette structure montre comment un élément absolu se positionne par rapport à son ancêtre positionné le plus proche (dans ce cas, la boîte relative).

• Élément collant :
  
  Utilise position : collant, qui commence comme statique mais devient fixe lorsqu'il atteint un certain seuil de défilement.
  

.relative-element {
    position: relative;
    top: 10px; /* Moves the element down by 10 pixels */
    left: 20px; /* Moves the element to the right by 20 pixels */
}

• Corps : réglé à une hauteur élevée pour permettre le défilement, ce qui est nécessaire pour démontrer les effets des différents types de positionnement.

• En-tête fixe : conçu pour toujours rester en haut avec un fond bleu pour la visibilité.

• Conteneur : Fournit un certain contexte pour les éléments positionnés à l'intérieur.

• Éléments statiques, relatifs, absolus et collants : Chacun a des styles distincts pour distinguer visuellement leur comportement de positionnement :

• L'électricité statique reste dans le flux de documents normal.

• Le relatif est poussé de sa position normale mais occupe toujours son espace d'origine dans la mise en page.

• L'absolu est positionné par rapport à la boîte relative, ce qui montre comment fonctionne le positionnement absolu au sein d'un parent positionné.

• Sticky démarre là où il le ferait de manière statique, mais "colle" une fois le défilement dépassé son seuil défini.

Conclusion

Et voilà ! Vous disposez désormais des connaissances nécessaires pour positionner les éléments avec précision, transformant ainsi vos conceptions Web de base en étonnantes. N'oubliez pas que la pratique rend parfait, alors plongez dans vos projets et commencez à expérimenter le positionnement CSS. Bon codage !

---

? Bonjour, je m'appelle Eleftheria, Community Manager, développeur, conférencière et créatrice de contenu.

? Si vous avez aimé cet article, pensez à le partager.

? Tous les liens | X | LinkedIn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!