Cacher is the code snippet organizer for pro developers

/*
Relative: stay in natural flow, but can use offset properties to nudge the element from its default position.
Absolute: removed from the page flow. Elements next in line in the html will move up to take the place of the element that is now position: absolute. Absolute frees the element from its parent contatiner. In order to contain the absolute element inside its parent container you must set the position of the parent element to any value but RELATIVE is most often used since it doesn't remove elements from their natural page flow. Will move with page scolls if affected by scroll.
Fixed: similar to absolute but it's always relative to the viewport and stays in the fixed position always, even on page scrolls.
Static: default value, elements are not positioned at all
Inherit

Don't use position: for page layout since it takes the element out of the page flow (with the exception of Relative) and out of the stacking order

https://tympanus.net/codrops/css_reference/position/

Also used in combo with box offset properties: top, bottom, right and left
*/
.box {
  position: relative;
  top: 10px;
}