Astuce CSS : bien utiliser la position absolute

Pourquoi utiliser la position absolute ?

Son emplacement peut-être défini par les propriétés top, left, bottom et right, toujours par rapport à son élément parent.
La valeur de ces propriétés détermine les distances entre les bords de l'élément avec son parent.
Un exemple :

div.pos-absolute{
  position: absolute;
  top: 10px;
  left: 5%;
}

Il est important de noter que l'élément positionné en absolute peut se placer au dessus d'un autre élément et le peut masquer ce qui est une erreur d'accessibilité.
Veuillez donc à bien contrôler l'accessibilité de votre bloc en responsive et en cas de zoom de la page.

Attention, s'il ne possède aucun élément parent, celui-ci sera positionné par rapport à l'élément racine de la page.
Je vous explique comment déterminer son élément parent.

Comment déterminer l'élément parent de l'élément en position absolute ?

Il vous arrive souvent des mésaventures avec la position : absolute.
Lorsque vous ce positionnement, votre élément se retrouve disposé de manière aléatoire sur votre page, voir même en dehors de votre page.

Comment expliquer ce phénomène étrange ?

Il ne faut surtout pas oublier que votre élément avec position: absolute se place par rapport à son parent le plus proche positionné (avec une valeur de position différente de static).

Si aucun parent positionné n’est trouvé, alors l’élément va se positionner par rapport à l’élément racine représentant la page en soi.

Vous l'aurez compris donc, pour bien positionner votre élément, il suffit de donner à son élément parent une position.

Reprenons notre exemple :

div.pos-absolute{
  position: absolute;
  top: 10px;
  left: 5%;
}
div.parente{
  position: relative;
}

J'espère que cette petite astuce vous a aidé à mieux comprendre l'utilisation de la position:absolute.

Dans le cas contraire, vous pouvez toujours jeter un œil sur la documentation de Mozilla.

Les bonnes pratiques pour la position Absolute :

• toujours définir le parent positionné,
• anticiper le contenu pour éviter débordement,
• ajouter z-index si nécessaire pour contrôler l’ordre d’empilement.