Learn

Another way of modifying the position of an element is by setting its position to absolute.

When an element’s position is set to absolute, all other elements on the page will ignore the element and act like it is not present on the page. The element will be positioned relative to its closest positioned parent element, while offset properties can be used to determine the final position from there. Take a look at the image below:

Diagram of element with absolute position

The “Website building in progress. Please come back later!” text is displaced from its static position at the top left corner of its parent container. It has offset property declarations of top: 300px; and right: 0px;, positioning it 300 pixels down, and 0 pixels from the right side of the page.

Instructions

1.

In style.css, set the position inside of the header ruleset to absolute.

Notice how it’s now removed from the normal flow of the document, and covering the welcome section.

2.

When you changed the position to absolute, you may have noticed that the header shrunk horizontally. We’ll learn why in a later exercise. For now, set the width property of the header to 100%.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?