blognote-info.com

Voila je fais un billet sur le CSS ça fait longtemps !!!

Le positionnement d'un élément peut être relatif, absolu, static ou fixed
ça s'exprime de cette façon par exemple:

position:absolute;

static c'est le plus simple c'est a dire que l'élément occupe la place qu'il devrait occuper ... ça n'a pas d'intéret ??? si , bien sur ... du fait de l'héritage il se peut qu'un élément hérite d'une position que vous ne vouliez pas ... Ou si dans un groupement de positionnement il y en a un auquel vous ne voulez pas appliquer de positionnement particulier ... bref ça sert :)

relatif ça sert a décaler la position d'un élément par rapport a sa position normale ...
par exemple un décalage de #page de 10px vers le haut et 50 vers la droite :

#page {
  position:relative;
  top:-10px;
  left:50px;
}

du fait de l'héritage, position relative indique a tous les éléments enfants que les positions s'exprimeront relativement a cet élément ... on va voir tout de suite ...

absolute indique une position absolue par rapport a la fenêtre ou, par rapport a l'élément de positionnement relatif parent le plus proche ... ça va je vous ai paumé la??? exemples :

#titre {
  position:absolute;
  top:0;
  left:0;
  /* positionné en haut a gauche */
}
#page {
  position:absolute;
  top:100px;
  left:0;
  /* positionné aproximativement en dessous du titre */
}
/* on suppose <div id="page"><div class="paragraf"><div class="indice"></div></div></div> */
.paragraphe {
  position:relative;
  /* pas de décalage on ne se sert que de l'héritage !!! */
}
.indice {
  position:abolute;
  top:0;
  right:0;
  /* positionné en haut a droite du <div class="paragraf"> et non du navigateur */
}

Cette méthode peut être contestée puisque la définition du position:absolute; spécifie que l'élément doit se placer par rapport a l'élément parent ... seulement pour avoir eu plusieurs fois le problème d'une myriade de corbeilles positionnées en haut a droite de mon navigateur les unes sur les autres parce que le navigateur avait une réticence a appliquer le css correctement, j'ai toujours utilisé cette méthode pour arriver à mes fins ...

position fixed quant a lui positionne par rapport a l'élément parent mais ne permet pas le défilement ... une sorte de position:abolute noscroll; (qui n'existe pas hein ...)