Question

what is the static, relative, and absolute positioning in CSS?

Answer 1

Static Positioning:

This is default value, all elements are in order as they appear in the document. This really is a misnomer. Boxes are not really positioned at all in the CSS. They are simply laid out in the order they occur in the markup and take up as much room as they need. This is default behavior you get when you don’t apply any CSS at all to your html.

Relative Positioning:

In relative the element is positioned relative to its normal position. When you set the position relative to the element, without adding other positioning attributes (top, bottom, left, right) nothing will happen. When you add an additional position such as left:20px the element will move 20px to right from its normal position. Here you can see this element is relative to itself. When element moves, no other element on the layout will be affected.

Absolute Positioning:

In absolute the element is positioned absolutely to its first positioned parent. This type of positioning allows you to place your element precisely where you want it. The positioning is done relative to the absolutely positioned parent element. In the when there is no positioned parent element, it will be positioned related directly to HTML element. Another thing to keep in mind while using absolute positioning is to make sure it is not overused, otherwise, it can lead to maintenance nightmare.