Boundaries and Space

Working with Position

The CSS position property enables you to position HTML elements in exact locations on a webpage. One useful value for this property is relative. This value positions page elements on a webpage relative to where they would normally appear.

By first setting position: relative;, you can then use the CSS properties top, left, bottom, and right to shift an element away from where it would have normally appeared on the page.

The code snippet below moves a div with the class container 10px away from the up and 20px away from the left side of the page.

.container {
  position: relative; 
  top: 10px; 
  left: 20px;

Ever click a button on a webpage that seemed to move down and then back up like a real-life button? We can implement this trick using the position property.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.