Practical Guide to Using CSS Position Relative & Absolute

Published on September 2, 2020

William Le and Andy Hattemer

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.

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: relative since 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: absolute takes 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.

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…


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.

Learn more about CSS position at the Mozilla Developer Network

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Le


Default avatar

Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

I’ve been working with CSS for years and always kind of knew what these both did, but also thought there was some unexplained aspect that would cause the elements to do inexplicable things from time to time. This concise explanation opens up a whole new level of understanding for me. Thank you so very much!

Wow, Thanks for this article it’s really helpful.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel