By /

CSS Position Property

The CSS position property specifies the positioning method used for an element. It dictates how an element is placed within its containing elements and how it behaves in relation to other elements on the page.

What it Does:

    • The position property determines how an element is taken out of the normal flow of the document and how it can be moved or placed.

Common Values:

    • static: (Default) The element is positioned according to the normal flow of the document. It appears where it naturally would in the HTML. You cannot use the top, right, bottom, or left properties to move statically positioned elements.
    • relative: The element is positioned according to the normal flow, but then it can be offset relative to its normal position using the top, right, bottom, and left properties. Other elements will still behave as if the relatively positioned element were in its original, static position.
    • absolute: The element is removed from the normal document flow and positioned relative to its nearest positioned ancestor (an ancestor with a position value other than static). If there is no positioned ancestor, it is positioned relative to the initial containing block (the <html> element). Absolutely positioned elements do not affect the position of other elements. You use the top, right, bottom, and left properties to specify its exact location.
    • fixed: The element is removed from the normal document flow and positioned relative to the viewport (the browser window). It stays in the same place even when the page is scrolled. You use the top, right, bottom, and left properties to specify its location. Fixed elements can overlap other elements.
    • sticky: The element is positioned based on the user’s scroll position. It behaves like relative within its normal flow, but when the element reaches a specified offset from the viewport edge (using top, right, bottom, or left), it becomes “fixed” in that position. It will stick until its parent element scrolls out of view.

Examples:

  • Static (Default):
div {
   position: static; /* Usually not explicitly set */
}

The div will be positioned normally in the document flow.

  • Relative:
.relative-box {
   position: relative;
   left: 20px; /* Move 20px to the right from its normal position */
   top: 10px; /* Move 10px down from its normal position */
   background-color: yellow;
   width: 100px;
   height: 50px;
}

The .relative-box will be shifted 20px to the right and 10px down from where it would normally appear.

  • Absolute:
.container {
   position: relative; /* Make the container a positioned ancestor */
   width: 200px;
   height: 150px;
   border: 1px solid black;
}
.absolute-box {
   position: absolute;
   top: 10px;
   right: 10px;
   background-color: lightcoral;
   width: 50px;
   height: 50px;
}

The .absolute-box will be positioned 10px from the top and 10px from the right of its nearest positioned ancestor, which is .container in this case.

  • Fixed:
.fixed-nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: lightgray;
   padding: 10px;
}

The .fixed-nav will stay at the top of the browser window even when the user scrolls.

  • Sticky:
.sticky-header {
   position: -webkit-sticky; /* For Safari */
   position: sticky;
   top: 0;
   background-color: white;
   padding: 10px;
   border-bottom: 1px solid #ccc;
}

When the .sticky-header scrolls to the top of its containing block, it will stick there until the parent element is scrolled out of view.

Scroll to Top