services web de proximité


Coordonnées de contact

SASU Yoma-Web, Yoan LE DIZES
55 Chemin de Combeguilhem
47240 Castelculier

+33 6 64 31 54 42

Réseaux sociaux
Vous avez une question ou avez besoin d'un devis, n'hésitez pas à nous contacter.
Captcha
Vous pouvez cliquer sur l'image pour changer le captcha.

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.


Par , le 21 oct. 2022