This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
How Absolute Positioning Works5:36 with Guil Hernandez
The CSS position property gives you precise control over your page layout. CSS positioning makes it easy to place elements, like a menu or an icon, anywhere on the page. This video covers a simple example of how absolute positioning works.
- Elements with absolute positioning are neither affected by or do not affect other elements in the normal flow of the page.
- They are like layers in Photoshop or Illustrator; you're free to place them anywhere you wish on the page.
- Positioned elements rely on you telling the browser where to place them, using values called positioning offsets, for the element's top, right, bottom or left position.
- When you use absolute positioning, you place the absolutely positioned elements in relation to a parent container; the parent container is the positioning context.
- You can change the positioning context to other containing elements; this lets us position elements precisely where we want them.
You need to sign up for Treehouse in order to download course files.Sign up