Gentle Shift

position: relative is the most " safe " type of positioning. The element remains in general flow but gains superpowers.

Its Main Functions:

1. Micro-shifts: You can move the element with coordinates, while browser " remembers " its original place. Space doesn't collapse, neighbors don't move.
2. **Creating a " Base " **: This is the most important role. If you want to place an icon INSIDE a button absolutely, the button MUST be relative.

.button {
  position: relative; /* Now I'm a base for children! */
}
.icon {
  position: absolute;
  top: -5px; /* Icon will align relative to button */
}