relative position html code example

Example 1: static positioning html

/*position: static;
HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This <div> element has position: static;
Here is the CSS that is used:
*/
Example
div {
  position: static;
  border: 3px solid #73AD21;
}

Example 2: relative positioning html

/*position: relative;
An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other 
content will not be adjusted to fit into any gap left by the element.*/
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}