Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les schémas de positionnement absolu (absolute) et fixé (fixed)

Les schémas de positionnement absolu (absolute) et fixé (fixed)

Le présent chapitre est vraiment un casse-tête J'espère vraiment ne pas trop vous enquiquiner

Préparons le terrain pour le positionnement absolu et fixe

Afin de bien comprendre, on doit se mettre d'accord à propos de certains termes et préceptes qu'ils vont constituer un fil conducteur pour le présent chapitre. Bon c'est parti

Le DOM : frère, enfant, parent et ancêtre

Pour bien appréhender la notion de positionnement avec les CSS, il convient de connaître ce que représente un enfant, un frère, un parent et un ancêtre, Eh ouais ! Les élément XHTML ont aussi leur propre famille un grand père méchant un vilain garnement , des frères qui ne s'arrêtent pas de se chamailler et un parent autoritaire

Un parent est un élément XHTML dans lequel un autre élément est directement imbriqué. Ce dernier constitue en retour un enfant. Par exemple si j'ai une image placée dans un paragraphe, ce dernier constitue pour elle son parent, et l'image représente en retour un enfant pour le paragraphe.

Un ancêtre est un terme plus vaste, du fait qu'un élément XHTML ne peut avoir qu'un et un seul parent. Par contre il peut descendre de plusieurs ancêtres. Supposons un document XHTML, où il y a en premier lieu un div, puis une citation qui englobe un paragraphe, lui même comprend une image. Cette dernière a un seul parent (l'élément 'p'). Par contre ces ancêtres sont plus nombreux : blockquote, div, body et enfin la balise html, qui est d'ailleurs le seul élément qui n'a pas de parent.

Vous pouvez déduire de ceci qu'un parent peut être considéré comme étant l'ancêtre immédiat.

Les frères sont des éléments qui partagent le même parent. Si j'ai dans le même paragraphe (premier exemple) un lien, alors l'image et le lien auront un lien de fraternité en raison du lien de parenté les réunissant vis-à-vis du paragraphe.

Qu'est ce qu'un élément XHTML positionné ?

Ceci est une notion trop importante et un passage obligatoire pour comprendre le schéma de positionnement absolu. Un élément positionné est tout simplement un élément dont la propriété CSS position a une constante autre que 'static'. Autrement dit c'est un élément positionné en mode absolu, fixé ou relatif.

Principes des positionnements relatif, absolu et fixé

Contrairement aux deux modes de positionnement statique (position : static) et relatif (position : relative). Les autres schémas de positionnement absolu (absolute) et fixé (fixed), ne prennent pas en considération les éléments frères pour positionner un élément, car il sera complètement retiré du flux normal et ne dépendra plus de ses frères.

Le positionnement absolu se fait toujours par rapport au premier ancêtre positionné. Donc il faut remonter dans l'arbre généalogique de l'élément et chercher le premier ancêtre ayant été positionné en un mode autre que statique (static). Si la recherche est infructueuse, alors l'élément sera positionné par rapport au bloc conteneur initial (l'élément body), c'est-à-dire par rapport aux bords du canevas.

Le positionnement fixé se fait toujours par rapport au canevas (zone d'affichage). Donc ce schéma de positionnement est établi toujours en fonction de l'élément body, abstraction faite de tous les ancêtres positionnés. A présent, je crois que vos êtes bien préparés, alors on va entrer dan le vif du sujet

Le positionnement absolu (position : absolute)

Le positionnement absolu est toujours établi en fonction des bords du premier ancêtre positionné, sinon par rapport au canevas. Si vous mettez par exemple la règle CSS "position: absolute; left: 20px;", l'élément sera décalé de 20 pixels à partir du bord gauche du bloc conteneur, qui lui sert de référence pour le positionnement absolu.

Je sais que certains d'entre vous ont du mal à suivre ou plutôt ils commencent à avoir du vertige css mais ne vous en faites pas on va illustrer tous les cas possibles avec des exemples accompagnés bien sûr des explications nécessaires :

Positionnement absolu par rapport aux bords du canevas

L'élément positionné en absolu a pour parent l'élément body

Exemple

<body>
  <h1 style="position: absolute; top: 70px; left: 90px;">premier titre</h1>
  <h2 style="position: absolute; top: 70px; right: 90px;">second titre</h2>
  <h2 style="position: absolute; bottom: 300px; left: 100px;">troisième titre</h2>
  <p style="position: absolute; bottom: 300px; right: 100px;">
  votre paragraphe : bla bla
  </p>
</body>

Explication

Dans cet exemple les quatre éléments <h1>,<h2>, <h3> et <p> ont pour parent l'élément 'body', car ils ne sont pas contenus dans d'autres éléments XHTML, c'est pour cette raison qu'ils seront positionnés par rapport aux bords du canevas. Voici l'aperçu dans le navigateur : schéma de positionnement CSS absolu (position : absolute)

En mettant une valeur '0px' à l'une de propriétés de décalage, le bord de l'élément en question sera adossé à celui du bloc conteneur. Si vous mettez par exemple :
position: absolute: top: 0px; ==> le bord supérieur de l'élément sera confondu avec celui du bloc conteneur.
position: absolute: bottom: 0px; right: 0px; ==> le coin inférieur droit de l'élément sera confondu avec celui du bloc conteneur.
position: absolute: top: 100px; ==> le bord supérieur de l'élément sera décalé de 100 pixels de celui du bloc conteneur.

L'élément positionné a des ancêtres suivant tous un schéma de positionnement statique (static)

Dans le cas où tous les ancêtres de l'élément positionné en absolu sont positionnés en mode statique (static), le navigateur les ignorent tous en rétablissant le positionnement par rapport aux bords du canevas.

Exemple

<body>
  <p>
    <img src="dessin.gif" style="position: absolute; left: 100px; top: 70px;">
  </p> 
</body>

Voici le rendu visuelmode de positionnement CSS absolu (position : absolute)

Bien que le parent de l'élément 'img' soit 'p' et non 'body', l'image sera quand même positionnée en fonction du bloc conteneur initial, car l'élément 'p' ne suit pas un schéma de positionnement fixé, absolu ou relatif.

Positionnement absolu par rapport aux bords du premier ancêtre positionné

Exemple

<body>
  <p style="position: absolute; top: 40px; left: 100px; background-color: #FFFF99"> 
  du texte : bla bla 
  <img src="rap.gif" style="position: absolute; left: 80px; top :60px;">
  </p> 
</body>

Voici le rendu visuel positionnement CSS absolu

Analysez bien cet exemple car il est très intéressant.
Le paragraphe sera positionné par rapport au coin supérieur gauche du document, car il a pour parent l'élément 'body'. Donc le bord supérieur du paragraphe sera poussé de 40 pixels vers le bas à partir de celui du bloc conteneur initial, et le bord gauche sera décalé de 100 pixels de celui de l'élément body.

Personnellement je raisonne en termes de bords, mais rien ne vous empêche de raisonner en terme de coins, lorsque deux propriétés de décalage ont été spécifiées. On peut donc dire : le coir supérieur gauche de la boîte du paragraphe sera placé dans le deuxième point vert (voir le graphique), qui a pour coordonnées (100,40) et qui sont calculés par rapport au premier point vert (le coin supérieur gauche du document) dont les coordonnées sont : (0,0).

L'image étant donné qu'elle a un parent positionné, en l'occurrence l'élément 'p', les propriétés CSS de décalage top et left, seront calculées par rapport aux bords du paragraphe. Dans notre exemple le coin supérieur gauche de l'image sera décalé de 80 pixels vers la droite et de 60 pixels vers le bas.

Le positionnement fixé (position : fixed)

Le schéma de positionnement fixé (fixed) se rapproche plus ou moins au positionnement absolu, mais avec deux différences :

La constante 'fixed' n'est pas supportée par le navigateur Microsoft Internet Explorer 6.

A noter aussi que tous les éléments positionnés dans l'un des modes 'absolute', 'static' ou 'relatif' vont aussi défiler avec la page, s'ils sont imbriqués dans un parent positionné avec le mode 'fixed'. C'est tout à fait normal, car un élément fixe et tous ses éléments enfants (à part ceux positionnés en mode 'fixed') doivent être conçus comme un bloc indivisible. Il sera insensé de voir par exemple un tableau qui défile avec la page, en laissant le contenu de ses cases derrière lui. Exemple :

<div style="position: fixed; top: 30px; border: solid">
  <p>paragraphe</p>
    <!-- beaucoup de contenu pour faire apparaître 
    la barre de défilement verticale et/ou horizontale -->
</div>

Commentaires

L'élément div sera écarté du bord supérieur du document de 30 pixels. Notez que le paragraphe va aussi défiler avec le contenu de la page, car il est positionné en un mode autre que 'fixed' (en l'occurrence 'static') et son parent est positionné en mode fixé.

En cas d'impression, un élément positionné en mode 'fixed' sera répété sur chacune des feuilles imprimées. Ceci est tout à fait logique et utile, car il va nous permettre de reproduire certains éléments comme une signature ou bien un menu ou une bannière dans chaque page imprimée.

Positionnement relatif, absolu et fixe avec les pourcentages

Il est aussi possible de positionner les éléments à l'aide des pourcentages, mais cela se différencie un peu du positionnement en unités de longueur absolues.

Positionnement relatif avec les pourcentages

Pour le schéma de positionnement relatif, les pourcentages sont calculés par rapport à l'élément parent (ancêtre immédiat) qu'il soit positionné ou non. Si le bloc conteneur n'a pas une hauteur autre qu'auto, alors les propriétés CSS top et bottom auront une valeur automatique '0'. Exemple :

<body>
  <p style="position: relative; left: 50%; border: solid;">paragraphe 1</p>
    <blockquote style="width: 600px; border: solid;">
      <p style="position: relative; left: 30%; border: solid;">
      paragraphe 2</p>
    </blockquote>
  <p style="position: relative; top: 50%; border: solid;">paragraphe 3</p>
</body>

Je vous recommande de reproduire et d'exécuter ce bout de code dans votre navigateur.
Le premier paragraphe sera décalé vers la droite de 50% de la largeur de bloc conteneur initial (l'élément body) à partir de sa position normale dans le flux. Le second paragraphe sera décalé vers la droite de 30% de la largeur de son parent (blockquote), c'est-à-dire de 180 pixels (600x30%). La position du troisième paragraphe ne sera pas modifiée, car la valeur calculée de la règle 'top: 50%' sera nulle (auto). En fait son bloc conteneur (body) a lui aussi une valeur automatique.

Notez aussi que vous avez droit aux pourcentages négatifs, qui permettent de changer le sens de décalage. Ainsi il est possible de réécrire les règles CSS de l'exemple ci-dessus de cette manière :
left: 50% ==> right: -50%
top: 50% ==> bottom: -50%
et plus généralement (en mode relatif) :
propriété: valeur (px, %) ==> propriété_inverse: -valeur (px, %)

Positionnement absolu avec les pourcentages

Contrairement au mode relatif, les valeurs en pourcentage dans le schéma de positionnement absolu sont toujours calculées par rapport aux dimensions du premier ancêtre positionné (en mode relatif, absolu ou fixé). Pour les deux positionnements absolu et fixé, les valeurs calculées de la propriété CSS de décalage 'top' et 'bottom' ne sont pas nulles (même si le bloc conteneur a une hauteur automatique), contrairement à ce qui se fait en mode relatif. Exemples :

<body>
  <div style="position: relative; width: 700px; height: 500px; border: solid;">
    <blockquote>
      <p style="position: absolute; left: 50%; top: 30%; border: solid;">
      Paragraphe
      </p>
    </blockquote>
  </div>
</body>

Le paragraphe sera décalé vers la droite de la moitié de la largeur de son premier ancêtre positionné (l'élément div et non pas blockquote), dans ce cas la valeur calculée de la propriété CSS left est '350px' (700/2). Le même paragraphe sera aussi poussé vers le bas de 150 pixels (500x30%).

Positionnement fixé avec les pourcentages

Ce qu'il faut retenir, c'est que dans le mode fixé les valeurs relatives se rapportent toujours au bloc conteneur initial (canevas), peu importe s'il a des ancêtres positionnés ou non. Exemple :

<blockquote style="position: absolute;">
  <p style="position: fixed; top: 50%; left: 50%">
  paragraphe  
  </p>
</blockquote>

Dans cet exemple, le paragraphe sera positionné au centre du document (élément body) même s'il a un parent positionné (élément blockquote). Une fois placé dans cet endroit, il sera condamné à y rester figé, même si on défile la page. Notez aussi que la valeur calculée de la propriété top est la moitié de la largeur du domaine d'affichage.

Ce chapitre touche à sa fin, Dans le didacticiel suivant, on va apprendre à utiliser la propriété CSS z-index.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau