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.