📌 Position

Les classes de position d’Orochi vous permettent de contrôler facilement l’emplacement des éléments sur la page. Elles simplifient la gestion du positionnement relatif, absolu ou fixe sans écrire de CSS personnalisé, tout en assurant une mise en page fluide et réactive.

Valeurs de position

Les classes de position d’Orochi définissent le comportement d’un élément dans le flux de la page. Utilisez-les pour positionner vos composants selon vos besoins, que ce soit pour des layouts, des overlays ou des éléments fixes à l’écran. 

<div class="o-static">.o-static</div>
<div class="o-relative">.o-relative</div>
<div class="o-absolute">.o-absolute</div>
<div class="o-fixed">.o-fixed</div>
<div class="o-sticky">.o-sticky</div>

Organiser les éléments

Organisez facilement les éléments grâce aux utilitaires de positionnement des bords. Le format est {propriété}-{position}.

Lorsque la propriété est l'une des suivantes :

  • top- pour la position verticale supérieure
  • start- pour la position horizontale gauche (en LTR)
  • bottom- pour la position verticale inférieure
  • end- pour la position horizontale droite (en LTR)
Et la position est l'une des suivantes :
  • 0 pour 0% du bord
  • 50 pour 50% du bord
  • 100 pour 100% du bord

Top Start
Top End
Center
Middle
Bottom Start
Bottom End
<div class="o-relative">
  <div class="o-absolute o-top-0 o-start-0"></div>
  <div class="o-absolute o-top-0 o-end-0"></div>
  <div class="o-absolute o-top-50 o-start-50"></div>
  <div class="o-absolute o-bottom-50 o-end-50"></div>
  <div class="o-absolute o-bottom-0 o-start-0"></div>
  <div class="o-absolute o-bottom-0 o-end-0"></div>
</div>