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>

Result

CSS position all values

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>

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>

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.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 4.0+

Practice Your Knowledge

What are the different types of positioning in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?