CSS - position

La description

La propriété position est utilisée pour positionner un élément. Il peut être utilisé conjointement avec les propriétés top, right, bottom et left pour positionner un élément où vous le souhaitez.

Valeurs possibles

  • static - La boîte d'élément est présentée comme une partie du flux de documents normal, suivant l'élément précédent et les éléments suivants précédents.

  • relative - La boîte de l'élément est disposée comme une partie du flux normal, puis décalée d'une certaine distance.

  • absolute - La boîte de l'élément est disposée par rapport à son bloc contenant et est entièrement supprimée du flux normal du document.

  • fixed- La boîte element.s est positionnée de manière absolue, avec tous les comportements décrits pour la position: absolu. La principale différence est que le bloc conteneur d'un élément à position fixe est toujours la fenêtre.

Syntaxe DOM

object.style.position = "static";

S'applique à

Tous les éléments HTML.

Exemple

Voici l'exemple -

<html>
   <head>
      <style type = "text/css">
         img#lead {position: absolute;}
         div.top {position: fixed; top: 0; height: 10% width: 100%;}
         sup {position: relative; bottom: 0.66em;}
      </style>
   </head>

   <body>
      <img src = "/css/images/bullet.gif">
      <div>Tutorialspoint.com</div>
      <p>This text contains <sup>superscript</sup> text.</p>
   </body>
</html>

Il produira le résultat suivant -