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 absolute position.

Absolute-positioned elements are completely removed from the document flow, so they no long touch or push other elements around them. They're pinned to the first parent element that has position relative, absolute, or fixed enabled. 

In this video, we'll show you how to:

  1. ‍Enable absolute position
  2. ‍Understand positioning values
  3. ‍Work with Z-index

And then bring it all together with an example.

Clone this projectDownload project assetsDownload lesson assets

Transcript

An element that's Absolutely positioned is completely removed from the normal document flow. It doesn't leave a seat warmer — there's nothing holding its spot or taking up any space wherever it's been placed. Like a relatively positioned element, an Absolutely positioned element has unlocked tons of controls for positioning and z-index. But most importantly, it takes its positioning cues from its parent — as long as that parent is set to relative (or anything other than Auto).

Two things (two examples) to cover related to Absolute position: a text label, and a button.

Let's look at the text label example.

Here's a text block sitting inside this div block. And our goal is to get this text block to show up in the corner of the div block. Let's select the text block and set the positioning to Absolute. But here's the problem: it didn't do what we wanted it to do.

That's because Absolute positioning requires one of its parent elements to be set to something other than auto. Let's select the div block here and set the position to relative. Now our text label (that text block) is positioned around the div block.

We can try out each of these position presets to adjust the positioning of the text label.

That's the text label example. Let's do the button.

And here's a div block which has some content inside. Let's look at the hierarchy here: the Submit Button isn't a direct child of the div block. The Form element is in between them in the hierarchy. But that's okay.

Let's select the div block, set it to relative positioning. Now that we've done that, we can select the Submit Button (which is a grandchild of the div block), and we can set this to Absolute. The Submit Button is being positioned around its grandparent.

So Absolutely positioned elements will take their positioning cues from the first parent element they find that isn't set to auto positioning.