Learn to Code via Tutorials on Repl.it!

← Back to all posts
Practical Guide to CSS Positioning
Nathanielx3rd

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:

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!

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:

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…

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…

Conclusion

Learn more about CSS Positioning on Mozilla Developer Docs

Hope you learned something here today. Please leave a comment if you have a question or have something to add and I will 100% respond to you.

Keep on coding 🙃

Voters
CodingElf66
sn236
VulcanWM
Nathanielx3rd
Comments
hotnewtop
VulcanWM

This is nice!

Nathanielx3rd

Hey @VulcanWM, Big fan of your work, Thanks for the upvote and comment :)

VulcanWM

Hey thanks! Np, I could never get this good in css lmao @Nathanielx3rd

sn236

Hi again, just one thing it should be % not px in absolute positioning

Nathanielx3rd

Howdy @sn236! Yes I suppose it is possible.

Relevent SO question = https://www.quakit.com/css-positioning-absolute

On this site I see that they use pixels with absolute. I know you can DEFINITELY use % and px. It just depends what your making and what you prefer. Either ways, thanks for the comment and upvote! :D

sn236
Nathanielx3rd

@sn236 You never got back t me about the text effects thing :)

sn236

@Nathanielx3rd Oh sorry, I have exams coming up so I won't join for a few days

Nathanielx3rd

@sn236 SadPog

Well then I hope you do well. 🙃

VulcanWM

gl with your exams! :) @sn236

sn236
sn236

@VulcanWM Thanks

VulcanWM

I need exactly this for my weekly project. Glad I saw this yesterday! :)

Nathanielx3rd

EDIT : SEPTEMBER 15 2:30: CURRENTLY WORKING ON A REPL TO EXPLAIN WHAT I JUST SAID.

Nathanielx3rd

EDIT : SEPTEMBER 15 4:00 : EXPLANATION REPL IS FINISHED