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

When an element's position is set to absolute, as in the last exercise, that element can still scroll out of view when a user scrolls.

We can fix an element to a specific position on the page (regardless of user scrolling) by setting its position to fixed.

div.navigation { position: fixed; height: 50px; width: 100%; }

In the example above, the div will remain fixed to its position no matter where the user scrolls on the page. This technique is used often for navigation bars on a web page.

It's still possible, however, for content (like text) to overlap other content when using this position. One solution is to set an opaque background color for the element.

div.navigation { position: fixed; background-color: #4BF5FF; height: 50px; width: 100%; }

The opaque background color will prevent any other content on the page from overlapping with any content inside of the div.

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