Review: Layout

 DISPLAY AND POSITIONING

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 adjusted width or height.
  • block elements take up the width of their container and can have manually adjusted heights.
  • inline-block elements can have set width and height, 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.

Comments

Post a Comment