To Specify Type of Positioning
position: static; //default, goes with normal flow of page
position: relative; // according to it's normal position
position: fixed; // according to the viewport
position: absolute; // according to nearest parent element, parent must have position: relative;
position: sticky; // when position is reached via scroll will "stick" to it
Position Using These Properties
top: ;
right: ;
bottom: ;
left: ;To change the position of an element.
float: none;
float: left;
float: right;Places an element on it's left or right side of it's container.
Shorthand Methods:
padding: 10px; // all 4 sides
padding: top right bottom left;
padding: top/bottom | left/right
padding: top | left/right | bottom
Other Methods:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;The space between content and border.
clear: none;
clear: left;
clear: right;
clear: both;Sets whether an element should be moved below a floated element.
height: 100%;
max-height: 100%;To set an element's height. Not recommended to set an height unless needed.
Shorthand Methods:
margin: 10px; // all 4 sides
margin: top right bottom left;
margin: top/bottom | left/right
margin: top | left/right | bottom
Other Methods:
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;To add space around an element's border.
box-sizing: border-box;To account for any border and padding in the values you specify for an element's width and height.