I Like to Move It, Move It (Part 1)

CSS Display and Positioning

This week, in our HTML and CSS series, you’re going to get your hands dirty! Time to Learn As You Code! Use this CodePen template to follow along.

Once you’ve set up an account and created a copy of this template, familiarize yourself with it. How are the elements in the HTML structured? Are there any familiar CSS properties being used? Once you feel comfortable, move on to the lesson.

Document Flow

Before we start moving things around, take a look at the four squares inside the frame. Notice how they’re stacked on top of one another all the way to the left side of the frame.

This is how items appear in document flow when we don’t add any styling. The browser starts in the upper left and stacks items below.

Why are these blocks not side-by-side? Because they have a default display value of block, meaning they take up the entire width. So even though the content box of the red square is only 25px wide, its container spans the full width of the screen.

It’s important to know this default behavior. Think of it as where the elements "want" to be. Now, our job is to coax them into the places we want them to be!

---

Positioning

How do we move items around the document flow? Let’s talk about the position property. Add the following to the .red-box class:

position: static;

Wait! Nothing changed… That’s right! Static is the default value. Let’s explore other values.

Relative

Change the position value to relative:

position: relative;

Still no change? Add:

top: 100px;

All of a sudden, our red block has jumped down by 100px!

Challenge #1: Use top and left to center the red box.

When we use relative positioning, the browser places the object relative to its position in normal flow.

Absolute

Remove the added properties and change position to absolute:

position: absolute;

Wait a minute… the blue block has disappeared!

Or has it? By changing the red block to absolute, we’ve taken it out of the normal flow of the document! The blue block is still there, just underneath our red block.

Challenge #2: Move the red block outside the containing frame using top, left, right, and bottom.

Fixed

Change the position property to fixed:

position: fixed;

Now, the element is removed from the document flow and stays fixed in the viewport, ignoring scrolling.

Challenge #3: Stick the red block to each corner of the viewport using top, bottom, left, and right.

Notice how the block is positioned according to the frame first, but when we start to assign values, it is positioned relative to the viewport.

Sticky

A special variation of the fixed property is sticky. This makes the element sit in the normal flow until its container scrolls past it. Then it sticks.

Uncomment the following code in .frame to see it in action:

height: 75px;
overflow: scroll;

Add this to the .red-box class:

position: sticky;
top: 0;

Scroll to see it stick!

Challenge #4: Use your new positioning knowledge to horizontally center the blocks in this order: Red, Yellow, Purple, Blue.

---

To Be Continued

That’s a wrap for today! Keep playing with these positioning properties this week. We’ll dive into the display property next week!