When styling a web page, positioning is a very important aspect of the design process. A page with all elements having standard positioning will look heavy on the left side and won't offer a pleasant visual experience for the user.

CSS offers many options when positioning elements. We will first look at the position value and the static, fixed, relative, and absolute properties.

Static: HTML elements have a static position as a default which means that it is not affected by other properties such as top, bottom, left, or right. An example of static positioning in CSS would look like:

div.static {
position: static;
{

Fixed: An element with the fixed style stays in position in the viewport regardless of page scrolling. What this means is that a logo or picture would stay on your screen in the same place at all times even when scrolling up or down the page. An example of fixed positioning in CSS would be:

div.fixed {
position: fixed;
bottom: 0px;
right: 0px;
width: 400px
border: 3px solid #000000;
{
This would make a small box with a black border stay on the bottom right of your screen no matter where you were on a page.

Relative: An element with relative positioning is positioned in relation to where it appears in code flow. A CSS example of relative positioning is:

div.relative {
position: relative;
left: 50px;
}
This would effectively add 50 pixels of space to the left of the element, moving it over 50 pixels to the right.

Absolute: An element styled with the absolute value positions the element relative to the nearest ancestor excluding static elements. Using this value you could position an element inside of another element. An example of absolute positioning in CSS would be:

div.absolute {
top: 80px;
right: 0;
width: 200px;
height: 100px;
}

Two other positioning properties:

Z-index: This property allows you to specify which element will appear in front of another element so that you could stack text over an image or something similar.

Clip: Basically allows you to determine what part of an element is visible. This allows you to take a large picture and then decide how much of it is to be shown without cropping or modifying the picture in a picture editor.

The CSS Positioning properties are:

position: This allows you to specify the type of positioning for an element.
bottom: This sets the bottom margin edge for a box that has a position value.
left: This sets the left margin edge for a box that has a position value.
right: This sets the right margin edge for a box that has a position value.
top: This sets the top margin edge for a box that has a position value.
z-index: The sets the stack order of an element.
clip: Clips an absolutely positioned element.

source: https://www.w3schools.com/css/css_positioning.asp