Le positionnement des éléments sur une page web peut être complexe.
Des éléments mal positionnés peuvent nuire à l’expérience utilisateur en masquant des contenus importants.
Cet article vous guide pour utiliser le positionnement CSS fixe et le z-index, optimisés avec Tailwind CSS, pour un design harmonieux.
Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée
Positionnement CSS fixe des éléments
On a vu comment placer un élément en position absolue, maintenant voyons comment fixer des éléments, comme une barre de navigation.
C’est tout simple, vous devez juste utiliser la classe fixed à l’élément que vous voulez fixer. Et tout comme le positionnement absolu, vous pouvez utiliser les classes top , left , right et bottom pour indiquer où l’élément va se situer.
Cette approche est couramment utilisée pour les barres de navigation, les en-têtes, ou des éléments comme des boutons d’action flottants (FAB). Si vous voulez, créer une simple barre de navigation, vous pouvez vous référer avec le code suivant :
- Code :
<nav class="bg-blue-500 px-6 py-3 fixed w-screen">
<ul class="flex justify-between text-white pr-80">
<li>Home</li>
<li>Welcome !</li>
<li>About us</li>
</ul>
</nav>
<article>
<p class="pt-20 px-80">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti pariatur voluptatum eius velit porro repellat ut iste voluptate vel dolorum animi amet necessitatibus fuga totam ipsa, a nostrum commodi obcaecati!
Molestias omnis sunt vel natus dignissimos molestiae, enim ea voluptatum, voluptates quo delectus mollitia excepturi perferendis asperiores soluta repellat facere dolorum pariatur deserunt quas in illo animi voluptatibus! Facilis, voluptatibus.
Eligendi eum nisi aliquid accusantium laboriosam magnam omnis distinctio, quam, consequuntur minus incidunt illum dolorem iste quisquam quibusdam, pariatur quos est porro odio in consectetur sunt ab beatae possimus. Animi?
At, ratione fugiat dolores hic quaerat odio possimus incidunt recusandae, rerum error quam veniam doloribus quae molestias repellendus vel. Fuga id quisquam optio nulla officia maxime non dicta hic excepturi.
Molestiae porro quis adipisci laudantium quae obcaecati aliquam, numquam et, excepturi quidem commodi rem placeat tempore? Est itaque adipisci deleniti doloribus, asperiores repudiandae ratione quo ex doloremque pariatur nesciunt quam.
Expedita velit facere dignissimos provident placeat. Ex temporibus voluptatum ratione deserunt saepe? Nihil nemo voluptatibus quo optio iste ad, sunt obcaecati sequi vero veritatis perferendis iure ipsum assumenda numquam earum.
Quasi vitae delectus fugiat ducimus odio ipsa labore? Aperiam ullam id doloremque laudantium quod velit numquam nisi commodi, dolores quaerat ipsam, similique quasi maiores facilis? Sit animi voluptatum maiores aliquid?
Dolores doloribus nisi earum voluptates aperiam error veniam quae culpa sunt blanditiis minus, aliquid iusto dolorem nostrum, beatae optio est cupiditate? Delectus suscipit qui soluta perspiciatis sint dicta ipsum vitae.
Dignissimos aperiam odit quas voluptas asperiores nostrum, quae id. Fugit est nemo cumque quis tenetur, accusantium facilis nobis, sed nulla voluptatibus, doloremque dolore! Porro quod amet, illum veniam id minus.
Dicta, esse nobis nemo accusamus odit fuga expedita sequi sint dolore, dolorum in labore quibusdam quaerat quam voluptatum tempore eligendi ducimus illo mollitia iste! Adipisci inventore rem atque repellendus quasi?</p>
</article>
- Résultat :
Superposition avec z-index en CSS
Parfois, quand plusieurs éléments sont définis par une position absolue. Il est possible qu’ils se chevauchent (ou se superposent) ce qui peut impacter et nuire à votre design. Afin d’éviter cela, on peut utiliser la propriété CSS z-index qui a sont équivalent en Tailwind z-{valeur} .
Sur deux éléments qui ont deux index, c’est celui qui a la plus grande valeur qui sera affiché au-dessus. Et oui ! La loi du plus fort s’applique ici !
<div class="relative mx-auto w-max">
<div class="h-40 w-40 bg-blue-500 rounded-lg absolute bottom-5 left-5"></div>
<div class="h-40 w-40 bg-red-500 rounded-lg absolute top-5 right-5"></div>
<div class="h-40 w-40 bg-yellow-500 rounded-lg relative"></div>
</div>
Dans ce code, vous pouvez voir premièrement que le conteneur a la classe relative . Cela signifie que les éléments positionnés en absolue à l’intérieur du conteneur vont se baser sur les bords de ce conteneur plutôt que sur la fenêtre du navigateur.
Si je veux maintenant changer la superposition entre ces éléments, il me suffit de jouer sur le z-index.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment fixer une barre de navigation en CSS ?
Qu'est-ce que le z-index en CSS ?
Comment utiliser le positionnement absolu en CSS ?
Pourquoi utiliser Tailwind CSS pour le positionnement ?
Comment gérer les conflits de superposition en CSS ?
Conclusion
En maîtrisant le positionnement CSS fixe et le z-index, vous pouvez améliorer la structure visuelle de votre site. Comment allez-vous appliquer ces techniques dans vos prochains projets ?
