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

Types of Positioning

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 of the position property:

<!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>

Try it Yourself »

Result

Example of the position property with all the values:

<!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>

Try it Yourself »

In the given example, we include all the values to show the differences:

Example of the position property with the "sticky" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        height: 150px;
        overflow: auto;
        position: relative;
        background-color: #cccccc;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        height: 30px;
        padding: 10px 10px 0;
      }
      ul li:first-child {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>Example of the position property with the "sticky" value:</h2>
    <ul>
      <li>Sticky List Item</li>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
    </ul>
  </body>
</html>

Try it Yourself »

Values

Value	Description	Play it
static	Elements are placed according to the normal flow of the document. This is the default value of this property.	Play it »
absolute	Elements are removed from the document flow and are positioned relative to its positioned ancestor element.	Play it »
fixed	Elements are removed from the document flow and are positioned relative to the browser window.	Play it »
relative	Element are placed relative to its normal position.	Play it »
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.	Play it »
inherit	Inherits the property from its parents element.