Another way of modifying the position of an element is by setting its position to
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:
The “This website is 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.
In style.css, set the
position inside of the
header ruleset to
Notice how it’s now removed from the normal flow of the document, and covering the welcome section.
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