The Position Property in CSS

« Prev Next »

The position CSS property sets how an element is positioned in a document. The position property specifies the type of positioning method used for an element.

Syntax

selector {
  position: value;
}
  • selector: The HTML element you want to style (e.g., div, span, p, etc.).
  • value: Specifies the type of positioning. Common values include static, relative, absolute, fixed, sticky.

css-position-property

Common Values for position

static (default)

  • The default value. Elements render in order, as they appear in the document.
  • Elements with position: static; are positioned according to the normal flow of the page.
  • No top, left, right, bottom properties have any effect on elements with position: static.

Example

div {
  position: static;
}
Run ›

position: relative;

  • The element is positioned relative to its original position.
  • The top, left, right, and bottom properties are used to position the element relative to its normal position.
notepad

Note: The element still occupies its original position in the document flow, even though it is visually repositioned.

Example

div {
  position: relative;
  top: 20px;
  left: 30px;
}
Run ›

absolute

  • position: absolute; removes an element from the normal flow and positions it relative to its nearest positioned ancestor (i.e., the nearest parent element with position: relative; or position: absolute;).
  • If no positioned ancestor is found, it is positioned relative to theelement.
  • The top, left, right, and bottom properties are used to position the element.

Example

div {
  position: absolute;
  top: 50px;
  left: 100px;
}
Run ›

fixed

  • position: fixed; fixes an element relative to the viewport. It always stays in the same place even when the page is scrolled.
  • The element is removed from the normal flow, and you can use the top, left, right, and bottom properties to control its position.

Example

div {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: lightblue;
}
Run ›

sticky

  • position: sticky; acts like a relative position until a certain scroll position is reached, at which point it becomes fixed.
  • It is often used for elements that should stick to the top of the page when scrolling (such as headers).
  • position: sticky; requires a top, left, bottom, or right value.

Example

header {
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  z-index: 10;
}
Run ›

The header element will behave like a relative element until the page is scrolled to the top of the element, at which point it will become fixed at the top of the viewport.

 

Example: Absolute and Relative Position

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: lightgray;
    }

    .box {
      position: absolute;
      top: 50px;
      left: 30px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="box">Box</div>
</div>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.