Moving from Flow Position

Sometimes we want to nudge an element out of its natural position within the document flow. Let's do this in two steps:

1. Set the position property for the special heading so that it stays within the document flow, but can be moved based on that starting position.
2. Move the special heading 2rem down from its top edge.

Hint: Make sure your properties are in alphabetical order.

Moving on the Page

This time, let's completely remove an element from the document flow and place it somewhere on the page. Let's do this in two steps:

1. Set the position property for the special heading so that it is removed from the document flow and can be positioned with regard to the page as a canvas. It should still move when the page scrolls.
2. Place the special heading in the top-right corner of the page, with no space between it and the edge of the window.

Hint: Make sure your properties are in alphabetical order.

Moving in the Viewport

And now we'll try something a little more complex and position an element so that it stays in place as the page scrolls beneath it. Again, we'll do this in two steps:

1. Set the position property for the navigation so that it is removed from the document flow and can be positioned with regard to the viewport window as a canvas. It should remain in place when the page scrolls.
2. Place the navigation at the very bottom of the viewport window, with no space between it and the edge of the window.

Hint: Make sure your properties are in alphabetical order.

Placing Multiple Sides

It's nice that the navigation stays at the bottom as the user scrolls, but we can probably make it look a little nicer. Add the CSS to make the navigation extend the whole width of the bottom of the window, from the left edge to the right edge.

There are multiple ways to achieve this, but you should use the technique most closely tied to the position property and its related properties

Hint: Make sure your properties are in alphabetical order.

Setting the Canvas

By default, absolutely positioned elements use the whole page as their canvas for placement. That's what's happening to the star in the code below. But sometimes we want to place the element absolutely with reference to a specific parent or ancestor as the canvas.

Add the CSS code to make the "card" div behave as the placement canvas for the absolutely positioned star. The star should end up in the upper-right corner of the card.

Hint: Make sure your properties are in alphabetical order.