L1 Info : Informatique et Document, CSS
 
◃  Ch. 6 CSS avancé  ▹
 

Affichage en dehors du flux

  • position:absolute;  : le positionnement de la boite se réfère à son conteneur s'il est lui même en position relative ou absolue ou à la fenêtre du navigateur.
  • position:fixed;  : le positionnement de la boite se réfère uniquement à la zone de visualisation du navigateur et reste fixe lorsqu'on fait défiler le contenu de la page dans le navigateur.
#blocPositionAbsolue {
  position : absolute;
  bottom : 5%;
  right : 1%;
  height : 10%;
  margin : 0% 1% 0% 1%;
  border : thin solid #000080;
  z-index : 1;
}
#blocPosAbsDevant {
  background-color: rgba(100,100,100,50%); // gris transparent
  position : absolute;
  bottom : 2%;
  right : 5%;
  height : 10%;
  margin : 0% 1% 0% 1%;
  border : thin solid #000080;
  z-index : 2;
}
#blocPositionFixe {
  background-color: yellow;
  position : fixed;
  top : 5%;
  left : 5%;
  height : 100px;
  width : 150px;
  border : thick dashed #800080;
  }
Bloc positionné en dehors du flux
Bloc positionné devant le précédent
Bloc fixe