CSS Position

By /

In this chapter, you will learn how to control the position of elements using CSS. The position property allows you to place elements in different ways on a web page. Let’s understand the most commonly used position values in CSS Position step by step.

What is the CSS Position Property?

The position property controls how an element is placed on a web page. The most commonly used values are:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Some position values also work with these properties:

top
right
bottom
left

These properties help you move an element from its normal position.

1. Position: Static

By default, HTML elements have:

position: static;

A static element follows the normal flow of the page.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Static Position</title>

  <style>
    div {
      position: static;
      background-color: lightblue;
      border: 2px solid blue;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div>
    This element uses static positioning.
  </div>

</body>
</html>

A static element stays in its normal place on the page. The top, right, bottom, and left properties do not normally move a static element.

2. Position: Relative

The relative value keeps an element in its normal position, but allows you to move it using properties like top, left, right, or bottom. For example:

div {
  position: relative;
  left: 30px;
}

This moves the element 30px to the right from its original position.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Relative Position</title>

  <style>
    div {
      position: relative;
      left: 30px;
      background-color: lightgreen;
      border: 2px solid green;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div>
    This box has moved 30px from its original position.
  </div>

</body>
</html>

The important thing to remember is that the element’s original space is still kept on the page.

3. Position: Absolute

An element with position: absolute is positioned relative to its nearest positioned parent. A positioned parent usually has a value such as:

position: relative;

Let’s see this with an example.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Absolute Position</title>

  <style>
    .container {
      position: relative;
      width: 400px;
      height: 200px;
      background-color: lightblue;
    }

    .box {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: yellow;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="container">

    <div class="box">
      I am positioned here.
    </div>

  </div>

</body>
</html>

Here:

  • The .container uses position: relative.
  • The .box uses position: absolute.
  • top: 20px places the box 20px from the top.
  • right: 20px places the box 20px from the right.

The .box is positioned inside the .container.

4. Position: Fixed

An element with position: fixed stays fixed in the same place on the screen. Even when you scroll the page, the element remains visible in the same position.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Fixed Position</title>

  <style>
    .box {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: blue;
      color: white;
      padding: 15px;
    }

    p {
      height: 1000px;
    }
  </style>
</head>

<body>

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

  <p>
    Scroll down the page and notice that the box stays in the same place.
  </p>

</body>
</html>

The box stays in the bottom-right corner even when you scroll.

Fixed positioning is often used for:

  • Chat buttons
  • Back-to-top buttons
  • Floating menus

5. Position: Sticky

The sticky value allows an element to behave like a normal element until you scroll to a certain point. Then, it stays fixed in that position while scrolling. For example:

div {
  position: sticky;
  top: 0;
}

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Sticky Position</title>

  <style>
    .header {
      position: sticky;
      top: 0;
      background-color: orange;
      padding: 20px;
    }

    .content {
      height: 1000px;
      padding: 20px;
    }
  </style>
</head>

<body>

  <div class="header">
    I stay at the top while you scroll.
  </div>

  <div class="content">
    Scroll down to see how sticky positioning works.
  </div>

</body>
</html>

When you scroll down, the header will stay at the top of the page.

Sticky positioning is commonly used for:

  • Navigation bars
  • Page headers
  • Sidebars

Understanding top, right, bottom, and left

These properties are used with positioned elements to control their location. For example:

.box {
  position: absolute;
  top: 10px;
  right: 20px;
}

This places the element:

  • 10px from the top.
  • 20px from the right.

You can also use:

bottom: 10px;
left: 20px;

These values move the element from the bottom and left sides.

Quick Recap

  • The position property controls how an element is placed.
  • static is the default position.
  • relative moves an element from its normal position.
  • absolute positions an element relative to a positioned parent.
  • fixed keeps an element in the same position while scrolling.
  • sticky sticks an element to a position while scrolling.
  • top, right, bottom, and left help control the position of an element.

Frequently Asked Questions (FAQs)

Q1. What is the CSS position property?

The CSS position property controls how an HTML element is placed on a web page.

Q2. What are the different CSS position values?

The main CSS position values are static, relative, absolute, fixed, and sticky.

Q3. What is the difference between relative and absolute position in CSS?

A relatively positioned element remains connected to its original position, while an absolutely positioned element is placed relative to its nearest positioned parent.

Q4. How do top, right, bottom, and left work in CSS positioning?

These properties help control the location of positioned elements by setting their distance from the top, right, bottom, or left side.

Q5. Which CSS position value should beginners learn first?

Beginners should start with static and relative, then move to absolute, fixed, and sticky to understand different CSS positioning techniques.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top