Relative Positioning

Most of the time you will use the default positioning for your web layout. When you need something to be positioned in relationship to it's original/default location, without affecting any other elements, you would use relative positioning. For instance you have a social media icon that you want to raise up when it is hovered. You could change the margins, but in static/default position it will move other elements on the page. Take a look at the example on this page to see how margins interact in this case. To avoid the icons from affecting the other elements you could use relative positioning, and use the bottom offset to raise the icon. This is also shown in the example on this page.

Avoid using relative positioning to make simple columns or placing elements of the page to the left or right of other elements (This would be accomplished with floats or inline-block elements).