relative positioning html

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

1/*
2position: fixed;
3An element with position: fixed; is positioned relative to the viewport, 
4which means it always stays in the same place even if the page is scrolled. 
5The top, right, bottom, and left properties are used to position the element.
6ex; Navigation BARS
7A fixed element does not leave a gap in the page where it would normally have
8been located.
9
10Here is the CSS that is used:*/
11
12div.fixed {
13  position: fixed;
14  bottom: 0;
15  right: 0;
16  width: 300px;
17  border: 3px solid #73AD21;
18}

1/*position: relative;
2An element with position: relative; is positioned relative to its normal position.
3
4Setting the top, right, bottom, and left properties of a relatively-positioned
5element will cause it to be adjusted away from its normal position. Other 
6content will not be adjusted to fit into any gap left by the element.*/
7div.relative {
8  position: relative;
9  left: 30px;
10  border: 3px solid #73AD21;
11}

1/*position: static;
2HTML elements are positioned static by default.
3
4Static positioned elements are not affected by the top, bottom, left, and right properties.
5
6An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
7
8This <div> element has position: static;
9Here is the CSS that is used:
10*/
11Example
12div {
13  position: static;
14  border: 3px solid #73AD21;
15}

1h2.pos_left {
2  position: relative;
3  left: -20px;
4}
5
6h2.pos_right {
7  position: relative;
8  left: 20px;
9}