Positions

Lets first look at the available property values:

Static -

Element will be positioned according to the normal flow of a document.

{
position: static;
}

Relative-

Element will be positioned according to the normal flow of a document, and then offset relative to itself based on the values of top, right, bottom, and left.

{
position: relative;
}

Absolute-

Element will be removed from the normal flow of a document,and there will be no space created for element in the page layout.They are not positioned based on their usual place in the document flow, but based on the position of their ancestor.

{
position: absolute;
}

Fixed-

Element will be removed from the normal flow of a document, and there will be no space created for element in the page layout. The fixed positioning property helps to put the element fixed on the browser. This fixed element is positioned relative to the browser window, and doesn't move even you scroll the window.

{
position: fixed;
}

TOP,RIGHT,BOTTOM &LEFT

Set the various offset properties

img {
position: relative;
top: 10px;
bottom: 20px;
left: 10px;
right: 10px;
}