Positioning dom element

Static positioning:

This is the default way that an element is positioned; it simply follows
the normal flow of the document. The top and left properties have no effect when an element
has static positioning. eg. position: static; top: 0px; left: 0px;

Relative positioning:

This means the positioning is very similar to static positioning, as the
element will continue to follow the normal flow of the document until instructed to do
otherwise. However, setting the top or left properties will cause the element to be shifted
in relation to its original (static) position. eg. position: relative; top: -50px; left: 50px;

Absolute positioning:

Positioning an element absolutely completely breaks it out of the
normal flow of page layout. An element that’s been positioned absolutely will be displayed
in relation to the first parent element that has a nonstatic position. If no parent
exists, it’s positioned in relation to the entire document. eg. absolute; top: 20px;
left: 0px;

Fixed Positioning:

Fixed positioning works by positioning an element relative to the
browser window. Setting an element’s top and left to 0 pixels will display that element
in the top-left corner of the browser for as long as the user is on that page, completely
ignoring any use of the browser’s scrollbars. position: fixed; top: 20px; right: 0px;

OffsetParent:

offsetParent: This is the parent that an element is positioned within. However,
in practice, the element that offsetParent refers to depends on the browser (for
example, in Firefox it refers to the root node, and in Opera, the immediate parent).

offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
element within the context of the offsetParent. Thankfully, this is always accurate in
modern browsers.