CORE CONCEPTS

CORE CONCEPTS

New

The Box Model

The Box Model

New

1:54

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering Elements with Flexbox

Centering Elements with Flexbox

New

1:20

Equal Height Layouts with Flexbox

Equal Height Layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

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

Absolute-positioned elements are completely removed from the document flow, so they no longer touch or push 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.

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

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.