CSS position Property

The position property specifies the position of the element in a document.

This property has the following values:

  • static
  • fixed
  • absolute
  • relative
  • sticky

Positioning has the following types:

Positioned elements - when an element is positioned, its position on the page is determined using the offset properties: top, right, bottom, and left. Offset properties do not work on static elements.

Relatively positioned elements - position value is "relative". The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

Absolutely positioned elements - position value is "absolute" or "fixed". The top, right, bottom and left properties specify offsets from the edges of the element's containing block.

Stickily positioned elements - position value is "sticky". It is treated as a mix of "relative" and "fixed" elements.

Initial Value static
Applies to All elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax Object.style.position = "sticky";

Syntax

position: static | absolute | fixed | relative | sticky | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      position: absolute;
      left: 40px;
      top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Another example which contains all the values:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box1 {
      position: static;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box2 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box3 {
      position: relative;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box4 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box5 {
      position: absolute;
      border: 2px solid #666;
      width:320px;
      height: 100px;
      top: 750px;
      right: 25px;
      }
      #box6 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box7 {
      position: fixed;
      border: 2px solid #8ebf42;
      background-color: #eee;  
      width: 300px;
      height: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      }
      #box8 {
      position: absolute;
      border: 2px solid #666;
      top: 70px;
      right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <h3>Position: static</h3>
    <p>The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:</p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:</p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>The Box5 element  does not remain in the natural flow of the page.
      It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>The Box7 element does not remain in the natural flow of the page and  positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:</p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

The given example contains all values of the position property.

Values

Value Description
static Elements are placed according to the normal flow of the document. This is the default value of this property.
absolute Elements are removed from the document flow and are positioned relative to its positioned ancestor element.
fixed Elements are removed from the document flow and are positioned relative to the browser window.
relative Element are placed relative to its normal position.
sticky Elements are positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Practice Your Knowledge

Which isn't a value for the CSS position property ?




Related articles