position

La propriété position choisit des règles alternatives pour le positionnement des éléments. Elle a été élaborée pour les effets d'animation scriptés.

En guise de valeurs, la propriété position accepte cinq mots-clés :

static Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés top, right, bottom, left et z-index ne s'appliquent pas.

<style>
.pave1 {
  width: 300px;
  height: 100px;
  background-color: yellowgreen;
}
.pave2 {
  width: 300px;
  height: 100px;
  left: 100px;
  background-color: lightskyblue;
}
</style>

<div class="fond">
  <div class="pave1"></div>
  <div class="pave2">Avec position: static; la propriété left n'a aucun effet</div>
</div>

Avec position: static; la propriété left n'a aucun effet
relative Ce mot-clé dispose tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément, sans modifier la présentation (et laisse ainsi un espace où l'élément aurait du être s'il n'avait pas été positionné). L'effet de position: relative sur table-*-group, table-row, table-column, table-cell et table-caption n'est pas défini.

<style>
.pave3 {
  position: relative;
  width: 300px;
  height: 100px;
  left: 100px;
  top: -50px;
  background-color: yellow;
}
</style>

<div class="fond">
  <div class="pave1"></div>
  <div class="pave3">Avec position: relative; pave3 est positionné par rapport à la place qu'il aurait occupé sans positionnement</div>
</div>

Avec position: relative; pave3 est positionné par rapport à la place qu'il aurait occupé sans positionnement
absolute Ce mot-clé ne laisse pas d'espace pour l'élément. Au lieu de cela, il le positionne à la position spécifiée relative par rapport à son plus proche ancêtre positionné ou au bloc englobant initial. Les boîtes positionnées de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.

<style>
.pave4 {
  position: absolute;
  width: 300px;
  height: 100px;
  left: 50px;
  top: 50px;
  background-color: violet;
}
</style>

<div class="fond" style="position: relative;">
  <div class="pave1"></div>
  <div class="pave4">Avec position: absolute; pave4 est positionné par rapport à fond qui est son parent positionné le plus proche</div>
</div>

Avec position: absolute; pave4 est positionné par rapport à fond qui est son parent positionné le plus proche
fixed Ce mot-clé ne laisse pas d'espace pour l'élément. Au lieu de cela, il le positionne à la position spécifiée, relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page). Cette valeur crée toujours un nouveau contexte d'empilement. Lorsque la propriété transform d'un élément ancêtre est différente de none, c'est cet ancêtre qui est alors utilisé comme conteneur.

#titre {
  position: fixed;
  z-index: 10;
  width: 100%;
  background-color: yellow;
  color: red;
  font-family: Arial;
  font-weight: bold;
  margin-top:-8px;
  margin-left: -6px;
  padding-top: -6px;
  padding-left: 12px;
}

Lorsque l'on utilise le mot-clé fixed, on "fixe" l'élément par rapport au viewport c'est à dire par rapport à ce qu'il y d'affiché à l'écran. Le code ci-dessus est un extrait du fichier CSS du site. Cet extrait correspond à la bande jaune en haut des pages qui indique sur quelle page nous sommes.

Pour pouvoir fixer un élément sans qu'il soit dépendant du viewport mais uniquement de la page dans lauelle il est inclus comme dans l'exemple ci-dessous, il faut créer la page à part et l'inclure dans une balise <iframe>.



<iframe
  width="700"
  height="300"
  frameborder="0"
  scrolling="no"
  src="dome.html">
</iframe>



<!DOCTYPE html>
<html lang="fr">
<head>
<title>Dôme de Stephen King</title>
</head>
<body>

<style>
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 10px;
  color: white;
}
#pave5 {
  position: fixed;
  top: 5px;
  left: 5px;
}
.fond2 {
  width: 290px;
  height: 280px;
  overflow: scroll;
  padding-left: 120px;
  border: 1px dashed black;
  font-family: Arial;
}
</style>

<div class="fond2">
La petite ville de Chester's Mill, dans le Maine, est soudainement coupée du monde par un dôme transparent qui apparaît aux limites de la commune, causant plusieurs accidents mortels le temps que la situation soit connue. L'armée des États-Unis se révèle incapable de détruire ce dôme et les habitants de Chester's Mill sont donc désormais livrés à eux-mêmes. Le deuxième adjoint municipal Jim Rennie profite de cette situation pour asseoir sa mainmise sur la ville grâce à son contrôle de la police, nommant ainsi comme policiers plusieurs jeunes gens particulièrement brutaux, dont son fils, Junior, qui est sujet à des accès de violence incontrôlables causés par une tumeur du cerveau non détectée. Dale Barbara, un vétéran de la guerre d'Irak désormais cuisinier à Chester's Mill, se voit chargé par son ancien supérieur hiérarchique de découvrir l'origine du dôme. Avec l'aide des quelques habitants qui le soutiennent, dont Julia Shumway, la rédactrice en chef du journal local, Rusty Everett, le responsable médical, et un trio de petits génies de l'informatique, il tente également de contrecarrer les plans de Jim Rennie.

  <div class="box" id="pave5">Le pavé reste fixe</div>
</div>

</body>
</html>
sticky La position de la boîte est calculée en fonction des flux normaux (c'est-à-dire de la position dans le flux normal). Ensuite, la boîte est décalée par rapport à la racine de son flux et par rapport à son bloc contenant. Dans tous les cas, y compris avec les éléments table, cela n'affecte pas la position des boîtes subséquentes. Lorsqu'une boîte B est positionnée avec sticky, la position de la boîte suivante est calculée comme si B n'était pas décalée. Pour les éléments qui sont rattachés à des tableaux HTML, position: sticky aura le même effet que position: relative.

(La valeur sticky n'est présente ici que parce qu'il est prévu qu'elle soit implémentée un jour sur tous les navigateurs)