On distingue 4 types de positionnements :
absolu (absolute) : la position du bloc est définie par rapport au coin supérieur gauche de la page
fixe (fixed) : tout comme avec “ absolu ”, on définit la position initiale du bloc par rapport au coin supérieur gauche de la page, à la différence que le bloc restera fixe à l’écran lorsque les internautes utiliseront l'ascenseur pour parcourir la page
relatif (relative) : ce positionnement permet de “ décaler ” le bloc par rapport à sa position normale dans la page
statique (static) : c’est le positionnement normal, par défaut, qui respecte l’ordre d’apparition des blocs dans le code source
Directement dans le CSS, vous pouvez indiquez vos préférences de positionnement d’un bloc :
position: absolute;
Si vous avez choisi de positionner un bloc en absolu, fixe ou relatif, vous pouvez indiquer sa position par rapport au bords de l'écran avec 4 paramètres CSS : top, bottom, left et right. Spécifiez une valeur en px, mm, em, %...
Par exemple, en CSS, pour positionner un bloc à 30px du haut de la page, vous utiliserez le code :
position:absolute;
top: 30px;
Nous avons vu que la propriété display permettait de transformer une balise inline en block - et inversement - ou de masquer un bloc (none). Cependant, avec cette propriété, un bloc “ masqué ” disparaît complètement de l’écran.
La propriété visibility permet au contraire de masquer le contenu d'un bloc, tout en laissant à la place un espace vide, de la taille qu'aurait occupé le bloc s'il avait été visible. Pour cela, on utilise l'attribut hidden.
Pour qu’un bloc soit normalement visible à l’écran, on utilise visible. C’est la valeur par défaut.
Enfin, le troisième attribut, inherit, permet à un bloc d’adopter le même comportement que le bloc qui le contient (le bloc “ parent ”).
En CSS, vous saisirez par exemple le code :
visibility: hidden;
Lorsque vous définissez un positionnement absolu pour plusieurs blocs, il se peut que certains blocs se chevauchent. Pour définir quel élément sera au-dessus des autres, utilisez la propriété z-index.
L’élément visible sera celui dont le z-index est le plus élevé. Par exemple, un bloc de z-index égal à 30 sera au dessus d’un bloc de z-index égal à 10.
En CSS, vous noterez :
z-index: 50;
Pour plus d'informations, vous pouvez nous contacter par mail.