new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

The position property allows you to move elements relative to: their current place in the document (relative), a parent element (absolute), or the viewport (fixed). Here we’ll be covering relative position.

Relative-positioned elements are positioned relative to their normal position. Increasing or decreasing the positioning values will move the element, but the surrounding elements will continue to interact with the element’s original place in the document, as if it hadn't moved at all.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets


Relatively Positioned elements are Positioned...relative to their normal Position. In other words, they're Positioned around themselves. A relatively Positioned element unlocks a ton of options for placement, but their original Position is preserved within the normal document flow. Once you set an element to relative Positioning, you can use values for top, bottom, left, or right to move it around from its starting Position, as well as adjust it's z-index or stacking order.

In this video lesson, we'll cover two things. One sounds normal, and the other doesn't. Overlapping...and Underlapping.

For Overlapping, let's take a look at this section. Lots of images. They all have the same class applied, but we'll go into this one and create a combo class. Special. And what we'll do next is set the Position to relative. We can now adjust the Positioning here, and we can see that our document flow isn't interrupted. None of the other images are pushed around.

What we also want to demo here is that if we make other adjustments here, relatively Positioned elements will pull in front of auto (or static) elements in the stacking order. That means relative content will usually stack in front of other (auto) content. That leads us right into the next category...

Let's talk Underlapping.

And we'll select one of the other images here. Let's create another combo class for this one: Super. And we'll go down and set the Position to relative. Again, this will unlock z-index controls. Let's type a value here of 1. Now it stacks on top of the other guy. If we go in and change that one? If we modify the z-index to be greater than one? It'll stack on top of the other one. Select the other one? And choose an even greater number? You get the idea.

So. Relative Positioning. Elements are Positioned relative to their normal Position without messing with other content on the page.