Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser

Great job! In this lesson, you learned how to control the positioning of elements on a web page.

Let's review what you've learned so far:

  1. The position property allows you to specify the position of an element in three different ways.
  2. When set to relative, an element's position is relative to its default position on the page.
  3. When set to absolute, an element's position can be pinned to any part of the web page, but the element will still move out of view the page is scrolled.
  4. When set to fixed, an element's position can be pinned to any part of the web page. The element will remain in view no matter what.
  5. The z-index of an element specifies how far back or how far forward an element appears should appear on the page.
  6. The float property can move elements as far left or as far right as possible on a web page.
  7. You can clear an element's left or right side (or both) using the clear property.

When combined with an understanding of the box model, positioning can create visually appealing web pages. So far, we've focused on adding content in the form of text to a web page. In the next unit, you'll learn how to add and manipulate images to a web page.


Take some time to experiment with your new knowledge of positioning in style.css. When you're done, proceed to the next unit.

report a_bug
If you see a bug or any other issue with this page, please report it here.