Practical Guide to Using CSS Position Relative & Absolute

Practical Guide to Using CSS Position Relative & Absolute

Practical Guide to Using CSS Position Relative & Absolute - In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

CSS position is sometimes considered an advanced topic because it can do things that are somewhat unexpected. Well, don’t let “the experts” intimidate you from pursuing excellence in your CSS competence! It’s a very accessible topic once you’re equipped with some of the underlying ideas.

Render Flow

An important concept to understanding relative/absolute positioning is render flow.

The general idea is that HTML elements all take up some space. Your browser’s rendering engine always renders everything in a grid-like fashion, starting at the top-left corner and moving successively towards the bottom-right until it’s done placing all of your HTML content.

If you’ve ever had a slow internet connection, and watched as large stuff on the webpage would push everything rightward and downward, that is essentially “render flow” in action.

You can change this default behavior using CSS position.

CSS Position

CSS position is sometimes considered an advanced skill because it’s not as intuitive as font-size or margin, etc., since it changes the natural “render flow” of the browser.

These are the possible values for CSS position:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */

Today we’re just going to look at position: absolute and position: relativesince they’re perhaps the most versatile ones that will get you a lot of mileage once you feel confident with them.

Relative Positioning

When you make an HTML element position: relative, it’ll remain “in the flow” of the layout but you can move it around!

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */

Along with position: relative you’ll usually want to define the top, right, bottom, or left offset.

You can think of “relative” position as being: “relative to where it was initially positioned.” In this case, the green square is now 25px from the left, and 25px from the top of where it was initially going to be.

What’s also worth noting is that its width and height is preserved in the square grid. That means it’s still considered “in the flow” of the layout… it just got kinda nudged.

Absolute Positioning

Absolute positioning is a very powerful CSS rule for moving HTML elements around. Sometimes yielding unexpected results:

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */

The orange square is actually the 13th of these 25 squares (the one in the middle of the grid), but it looks like it’s the last square! Weird. Using position: absolutetakes elements “out of flow” so its grid space gets collapsed.

Yea but why’s it all the way up there?!

Originating coordinates

The orange square gets placed at the 0x, 0y coordinates (eg.: the top-left corner). Just how browser rendering always begins at the top-left corner, position: absolute elements use that as their rendering origin too. You can use top/right/bottom/left properties to offset it from there.

But, you can also give it different originating coordinates…

.grid {
  position: relative;
.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */

In the example above, the parent element (div.grid) has the position: relative rule which causes the orange square to take that as its rendering origin.


Pretty weird if you haven’t witnessed this before. I didn’t even learn this until 2 years ago… after having used CSS for about 6 years!

While this may seem unintuitive behavior, it’s actually intentional! Allowing for this gives you a lot of control over where/how you arrange HTML elements… as we’ll see in the demos below.

Demo Time!

Here’s some examples of using position: absolute and position: relativeto create some interesting designs.

Alice in Wonderland

This is an excerpt from “Alice in Wonderland” where some of the letters are nudged down using a few position: relative rules.

  The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly
  <span style="position: relative; top: 4px">down</span>
  <span style="position: relative; top: 8px">.</span>
  <span style="position: relative; top: 12px">.</span>
  <span style="position: relative; top: 16px">.</span>

Inline elements are moved in this demo, but you can do this to block elements too! Rest assured: other HTML elements won’t take up its space, and thus ruining this effect.

Overlapping HTML elements

As we covered earlier, if you place absolutely positioned elements inside relatively positioned ones you’re able to effectively group them into layers of HTML elements.

Wrapping both of these absolutely positioned images with a parent <div> that’s relatively positioned, we get this schnazzy portrait of our favorite alligator.

Once you get comfortable using position: relative and position: absolutetogether, you’ll begin to think in terms of creating lush layers of HTML elements instead of thinking in a strictly 2D mindset. It’s something that will take your CSS game to the next level.

Color pit

This demo is similar to the previous one, but we’re using 5 images here that are absolutely positioned inside a single relatively positioned container <div>.

What’s cool is that once you get the width and top/left values just right 👌 for each of the 5 images, you can essentially treat this thing as a single visual element. Move it around the webpage, put other HTML elements next to it, animate it… it’ll retain this exact look as though it’s a single image.


When you start using position: relative and position: absolute it opens a new world of design possibilities. You can create layered visual elements, and feel a deep sense of confidence about how browsers will render, and thus place the visual elements that you’ve so meticulously designed.

css html web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer]( "Hire CSS Developer")**...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Introduction To HTML & CSS: Web Development For Beginners

Introduction To HTML & CSS: Web Development For Beginners - Complete HTML & CSS web developer bootcamp. Learn & practice website design using HTML5 & CSS3 web development resources

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

The Ultimate Guide to Web Development with HTML and CSS

The Ultimate Guide to Web Development with HTML and CSS. Learn Web Development by creating a Blog with HTML and CSS. Make a web applications using HTML5 and CSS3. Create a blog from Scratch.