Positionnement Absolu avec Tailwind CSS

Le positionnement d’éléments en CSS peut être complexe et chronophage.

Cela entraîne souvent des défis de design, rendant difficile le contrôle précis de l’alignement et de l’espacement des éléments.

Cet article vous guide à travers l’utilisation de Tailwind CSS pour simplifier le positionnement absolu, vous offrant une méthode rapide et intuitive pour gérer vos éléments.

Table de matière

Positionnement absolu avec Tailwind CSS Utiliser classes utilitaires Tailwind CSS FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Positionnement absolu avec Tailwind CSS

En CSS traditionnel, pour positionner un élément de manière absolue, vous utiliseriez les propriétés position: absolute et ajusteriez sa position avec top , left , right , ou bottom .

Avec Tailwind CSS, cette même tâche est simplifiée grâce à des classes utilitaires prêtes à l’emploi comme absolute , relative pour types de positions suivies des classes de positionnement comme top-{valeur} , right-{valeur} , bottom-{valeur} , et left-{valeur}. Il y a bien évidemment beaucoup de valeur que vous pouvez utiliser comme bottom-2 qui correspond à bottom : 0.5rem; et plein d’autres que vous retrouverez dans la documentation .

Astuce Pratique : Quand vous utilisez le positionnement absolu, le plus simple serait d’utiliser les valeurs arbitraires pour avoir un contrôle total.
Pour cela, utilisez la classe right-[..valeur exacte..] par exemple. Cela est aussi valable avec top, left et bottom.

Comme toujours, un exemple s’impose pour que vous puissiez voir le résultat visuellement :

Code :

				
					
 <body>

<div class="w-40 h-40 bg-green-400 text-white p-5 rounded-lg absolute bottom-[50px] left-[200px]">
Je suis positionné absolument avec Tailwind.
</div>

<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"9acae7584d","url":"https:\/\/blog.alphorm.com\/positionnement-absolu-tailwind-css","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>

Résultat :

Utiliser classes utilitaires Tailwind CSS

Lorsque vous utilisez absolute , il est important de noter que l’élément sera positionné par rapport à son conteneur parent le plus proche qui utilise position: relative , absolute , fixed ou sticky (que nous verrons par la suite). Si aucun conteneur parent n’a une de ces positions, l’élément sera positionné par rapport à la fenêtre (viewport). C’est pourquoi il est souvent utile d’utiliser la classe relative sur le conteneur parent pour mieux contrôler l’élément positionné.

Dans l’exemple qui suit, malgré le fait que l’élément en vert soit en position absolue, celui-ci reste néanmoins par rapport à sont élément parent qui est en bleu.

Code :

				
					
 <div class="relative w-64 h-64 bg-blue-400">
<div class="w-40 h-40 bg-green-400 text-white p-5 rounded-lg absolute bottom-[50px] left-[50px]">
Je suis positionné relativement à mon parent.
</div>
</div>

Résultat :

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 positionner un élément de manière absolue avec Tailwind CSS ?

Pour positionner un élément de manière absolue avec Tailwind CSS, utilisez la classe utilitaire ‘absolute’. Vous pouvez ensuite ajuster la position de l’élément en utilisant les classes ‘top-{valeur}’, ‘right-{valeur}’, ‘bottom-{valeur}’, et ‘left-{valeur}’. Ces classes vous permettent de définir des positions spécifiques en pixels, rem, ou toute autre unité supportée par Tailwind, offrant ainsi une grande flexibilité dans le design de votre site.

Quelle est l'importance des conteneurs parents en positionnement absolu ?

En positionnement absolu, l’élément est positionné par rapport à son conteneur parent le plus proche avec une position définie (relative, absolute, fixed, ou sticky). Si aucun conteneur parent n’a une de ces positions, l’élément sera positionné par rapport au viewport. Pour mieux contrôler l’élément positionné, il est souvent conseillé d’utiliser la classe ‘relative’ sur le conteneur parent.

Comment utiliser les valeurs arbitraires dans Tailwind CSS ?

Tailwind CSS permet l’utilisation de valeurs arbitraires pour un contrôle précis sur le positionnement. Par exemple, pour définir une position exacte, vous pouvez utiliser des classes telles que ‘right-[50px]’ ou ‘bottom-[2rem]’, qui vous permettent de spécifier la position exacte en unités de votre choix. Cette flexibilité est particulièrement utile pour ajuster les éléments de manière précise dans votre design.

Quelles sont les classes de positionnement en Tailwind CSS ?

Tailwind CSS propose plusieurs classes de positionnement comme ‘absolute’, ‘relative’, ‘fixed’, et ‘sticky’. Ces classes définissent le type de positionnement de l’élément. Pour ajuster davantage la position, vous pouvez utiliser ‘top-{valeur}’, ‘right-{valeur}’, ‘bottom-{valeur}’, et ‘left-{valeur}’, permettant ainsi de positionner précisément les éléments sur la page selon vos besoins de design.

Comment Tailwind CSS simplifie-t-il le positionnement CSS traditionnel ?

Tailwind CSS simplifie le positionnement CSS traditionnel en offrant des classes utilitaires préconçues qui remplacent les propriétés CSS standard. Au lieu de définir ‘position: absolute’ et ajuster ‘top’, ‘left’, ‘right’, ou ‘bottom’ manuellement, vous utilisez des classes comme ‘absolute’, ‘top-{valeur}’, ‘right-{valeur}’, etc. Cela rend le processus de design plus rapide et plus intuitif, en facilitant l’ajustement des éléments directement dans le HTML.

Conclusion

En maîtrisant le positionnement absolu avec Tailwind CSS, vous gagnez en précision et flexibilité dans vos designs. Quelle autre fonctionnalité de Tailwind CSS aimeriez-vous explorer davantage ?