I'm going to talk about 4 types of CSS positioning.

1.Static Positioning- this applied by default…if an element is set to static Positioning it doesn't do anything no matter what you add. I don’t usually even bother writing position: static—it’s already on by default. But if I need to cancel out some weird inherited style or just reset things to normal, I’ll through it in. Like this:

position: static;
top: 40px; /* Does nothing, seriously. /
left: 40px; / Yeah, still not moving. */

2.Relative Positioning.
Relative positioning lets you nudge an element from its static spot without breaking the flow.
The magic’s in the offset crew: top, right, bottom, left. These let you slide your element around. For example:

position: relative;
top: 40px; /* Drops it down a bit. /
left: 40px; / moves it to the right. */

3.Absolute Positioning- With absolute you can make something fly around the page. Yes it can fly 💸 because absolute is out of the flow. You can position an element to be on top of the page below or in the middle for Example to position something on the top right corner we say:

.element {
position: absolute;
top: 0; /* keeps on top*/
right: 0;/* moves to right*/
However it's important to not that it's relative to it's nearest ancestor meaning if .element is inside a container or div with a certain class eg .parent which also has a positioning either relative or absolute. The class . element's position will be relative to the . parent which is it's ancestors.

4.Fixed Position - Says where you put me I will not move I'll stay they no matter how you scroll the page. An element in fixed position will not move it will stay just there… ever come across a website whereby you scrolling down but theres just one feature that keeps scrolling with you? Yep that's fixed position.

fixed-element {
position: fixed;
top: 20px;
right: 20px;
background-color: #f2f2f2;

I'll end with Z index which makes a property be on top of everything or behind.
Everything on the screen has a z- index of zero and it's up to you to decide how you want it to be.
Z-index: value;
If you want a pop up or anything to go behind you can give it a Z-index: -1;