relative css position code example

Example 1: position css

The types of positioning in CSS are-
1)static: this is the default value.
2)sticky: the element is positioned based on the user's scroll position.
3)fixed: the element is positioned related to the browser window.
4)relative: the element is positioned relative to its normal position.
5)absolute: the element is positioned absolutely to its first positioned parent.

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;
}

Example 3: css position

h2.pos_left {
  position: relative;
  left: -20px;
}

h2.pos_right {
  position: relative;
  left: 20px;
}

Example 4: popsition relative css

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.