Learn
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:
- The
position
property allows you to specify the position of an element. - When set to
relative
, an element’s position is relative to its default position on the page. - When set to
absolute
, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled. - 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. - When set to
sticky
, an element can stick to a defined offset position when the user scrolls its parent container. - The
z-index
of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements. - The
display
property allows you to control how an element flows vertically and horizontally in a document. inline
elements take up as little space as possible, and they cannot have manually adjustedwidth
orheight
.block
elements take up the width of their container and can have manually adjustedheight
s.inline-block
elements can have setwidth
andheight
, but they can also appear next to each other and do not take up their entire container width.- The
float
property can move elements as far left or as far right as possible on a web page. - 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.
Instructions
Take some time to experiment with your new knowledge of positioning in style.css.
When you’re done, proceed to the next unit.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.