Formation 36

Positionner des blocs HTML à l'écran

Type de positionnement : position

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;

Emplacement par rapport aux bords de l'écran : top, bottom, left et right

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;

Visibilité d'une balise : visibility

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;

« Altitude » d'un calque : z-index

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.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS