Sélection de la langue

Recherche

Positionnement absolu

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

L'utiliser pour positionner un élément de contenu par-dessus un autre élément de contenu.

Conception et codage

Utilisation de base

Défaut

L'utiliser pour contrôler la position du contenu dans une page. Le navigateur positionne toujours le contenu dans le coin supérieur gauche. Pour modifier l'emplacement par défaut, il faut définir à la fois la position x et la position y. Les positions x sont pstn-lft-* et pstn-rght-*. Les positions y sont pstn-tp-* et pstn-bttm-*. Puisque les positions x et y sont utilisées de concert, l'affichage est réactif. Lorsque le système de grilles entraîne une linéarisation pour les petits espaces d'affichage, le positionnement en fait autant.

Positionnement CSS par défaut
Positionnement en haut Positionnement à droite Positionnement en bas Positionnement à gauche
  • .pstn-tp-xs = toujours positionné
  • .pstn-tp-sm = tablettes seulement : vers le haut
  • .pstn-tp-md = ordinateur de bureau à petite résolution seulement : vers le haut
  • .pstn-tp-lg = ordinateur de bureau à grande résolution seulement : vers le haut
  • .pstn-rght-xs = toujours positionné
  • .pstn-rght-sm = tablettes seulement : vers le haut
  • .pstn-rght-md = ordinateur de bureau à petite résolution seulement : vers le haut
  • .pstn-rght-lg = ordinateur de bureau à grande résolution seulement : vers le haut
  • .pstn-bttm-xs = toujours positionné
  • .pstn-bttm-sm = tablettes seulement : vers le haut
  • .pstn-bttm-md = ordinateur de bureau à petite résolution seulement : vers le haut
  • .pstn-bttm-lg = ordinateur de bureau à grande résolution seulement : vers le haut
  • .pstn-lft-xs = toujours positionné
  • .pstn-lft-sm = tablettes seulement : vers le haut
  • .pstn-lft-md = ordinateur de bureau à petite résolution seulement : vers le haut
  • .pstn-lft-lg = ordinateur de bureau à grande résolution seulement : vers le haut
Apparence
Image de personnes et d'arbres

Lien au-dessus de l'image
Bonne utilisation

Points de conformité :

  • Utilisez une propriété CSS autre que .static avec la couche qui doit apparaître derrière l'objet en position absolue. Par exemple, les grilles ont la propriété CSS position: relative; ainsi, elles fonctionnent bien avec cette composante de conception
  • L'utiliser pour superposer du texte par-dessus une image
  • Assurez-vous que l'image et le texte sont liés l'un à l'autre
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne superposez pas du texte par-dessus du texte
  • Ne superposez pas du texte par-dessus une image de façon à ce que l'image ne soit plus visible
Code
<div class="row">
  <div class="col-xs-12">
   <a href="#">
    <img src=".." class="img-responsive full-width" alt="">
    <p class="well brdr-rds-0 well-sm mrgn-bttm-sm mrgn-rght-md mrgn-lft-md opct-90 pstn-bttm-xs pstn-rght-xs">...</p>
   </a>
  </div>
</div>

Utilisation avancée

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Date de modification: