What are Absolute and Relative positioning in CSS? Explained with example

At the beginning of a web development journey, most developers use margin or padding for positioning elements. To move an element from right to left or top to bottom, the CSS margin property is enough. Because margin is easy to use, many new developers don't give much importance to the position property.

I also didn't really understand the use of absolute and relative positioning during the first few years. But over time, when I started working on larger projects, I realized that simply knowing margin or padding isn't enough.

The problem is that you know about the positioning properties, but you can't use them in the right places. Even though websites like W3Schools and other learning platforms provide great tutorials on CSS positioning, many devs still don't understand the right places.

Hi, I'm Hemanta. In today's tutorial, we'll try to understand CSS positioning more easily with real-life examples and learn when to use each property.

Table of Contents

• Static Position (static)
• Relative Position (relative)
• Absolute Position (absolute)
• Fixed Position (fixed)
• Sticky Position (sticky)
• Conclusion

To move on to the next step, you need to have a basic understanding of HTML and CSS. If you're not familiar with them yet, let's start by learning about CSS position.

The CSS Position Property (position:__;)

Position is a CSS layout control property, like margin or padding. It helps control where HTML elements show up on a web page. The position property has five possible values: absolute, relative, static (default), fixed, and sticky. The most commonly used values are absolute and relative.

Students at CodeHemu many times ask this question: what happens if I don't specify a position for an HTML element? The answer is every element's default static position.

Static (No need to define in CSS)

When no position is specified for an HTML element in CSS, the default position of the element is static. In other words, an HTML element has static as its default position.

If an element is in a static position, properties like top, left, right, and bottom will not working. Since developers usually don't specifically set position: static;, so you'll rarely see it in CSS code.

Let's look at an example of static position.

img.car {
  position: relative;
  top: 100px;
}

In the first part, you can see that the car has moved 100 pixels from the top. Here, this car position is relative in CSS, so the top property is working.

document.querySelector("img.car").style.position = "static";

In the second step, we changed this car position to static using JavaScript. As a result, the top: 100px value will no longer work, and the car will return to the static position in the normal document flow.

In this way, you can use JavaScript in your project to set an element's position to static. You can also use static positioning when building responsive website layouts.

Let's look at another example of static position.

Here, we've made the logo in the website header responsive. When the website opens on a mobile screen, the logo stays on one side of the header. Again, if it opens on a desktop, the logo moves to the center.

img.logo {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 800px) {
  img.logo {
     position: static;
  }
}

In this code:

• When position: relative; is applied, left: 50%; will work, because left only works with relative, absolute, fixed, or sticky.

• Inside the media query, when the position changes to static, the left property will stop working.

Relative (Move from original position)

In relative positioning, the element stays in the normal document flow, just like in static positioning. But the difference is that with relative positioning, you can use properties like top, left, right, and bottom. That means relative position allows you to move the element from its original position.

Let's look at an example of relative position.

img.helicopter {
  position: relative;
  top: -60px;
  left: 150px;
}

In this example, you can see that the helicopter is first in its original position. When we set the helicopter's position to relative, the element gains the ability to offset properties like top and left. As a result, we can move the helicopter 150 pixels to the right using left: 150px; and 60 pixels upward using top: -60px;.

Fixed (Pinned to Screen)

fixed positioning works based on the browser window. This means that the element does not depend on any parent elements, only based on the viewport.

You can use the offset properties (like top, left, etc.) to place the element in any position starting from the top-left corner of the viewport. Even when the page is scrolled, the element's position will not change.

Web developers use fixed positioning in many layouts. For example, they position a chat box icon in a corner of a service website, or place a notification icon on an entertainment website.

Let's look at an example of a notification icon.

img.notifi {
  position: fixed;
  bottom: 25px;
  right: 25px;
}

In the example above, you can see a notification icon. We set its position to fixed and placed it 25 pixels from the bottom and 25 pixels from the right. As a result, the notification icon place in the bottom-right corner of the browser window. Even if you scroll the page, the notification icon will not move with the content.

Absolute (Depends on the Parent)

In absolute positioning, the element position depends on its nearest parent element, and the parent element position must be relative, absolute, fixed, or sticky. If the nearest parent element is static, then the element position will depend on the next closest non-static parent element.

Let's look at an example of absolute position.

div.red {
  position: fixed;
  width: 200px;
  height: 200px;
  background: red;
}

div.blue {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: blue;
}

div.yellow {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50px;
  height: 50px;
  background: yellow;
}

In this example, the position of the div.red is fixed and the position of the div.blue is not defined. This means that the position of the div.blue is static.

The div.red becomes the reference point for the absolutely positioned box. So the box is placed 0 pixels top and 0 pixels to the left from the div.red.

Sticky (Relative First, Fixed Later)

sticky position is a mix of normal and fixed positions. The element stays in its normal place at first, but when you scroll to a certain point, it becomes fixed on the screen.

Let's look at an example of sticky position.

In the example above, when you scroll the page, the dark box moves upward along with the content. Once the box reaches the top edge of the viewport, it sticks there.

Conclusion

Now that you understand all five position types, try this challenge. Build a page layout with a sticky header, an absolutely positioned notification badge, and a fixed chat icon in the bottom-right corner. Drop your CodePen links in the comments. I would love to see what you create!

Happy CSS Positioning!