CSS - position


The position property is used in positioning an element. It can be used in conjunction with the top, right, bottom and left properties to position an element where you want it.

Possible Values

  • static − The element box is laid out as a part of the normal document flow, following the preceding element and preceding following elements.

  • relative − The element's box is laid out as a part of the normal flow, and then offset by some distance.

  • absolute − The element's box is laid out in relation to its containing block, and is entirely removed from the normal flow of the document.

  • fixed − The element.s box is absolutely positioned, with all of the behaviors which are described for position: absolute. The major difference is that the containing block of a fixed-position element is always the viewport.

DOM Syntax

object.style.position = "static";

Applies to

All the HTML elements.


Here is the example −

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

      <img src = "/css/images/bullet.gif">
      <p>This text contains <sup>superscript</sup> text.</p>

It will produce the following result −