The following series of Codepen examples try to explain the use of absolute and relative position. Visit each of these, read the code, make changes in codepen, and see what happens. Next try and recreate these for yourself.
- Static position – This is the default position
- Relative position – Relative position offsets an object from where it would have appeared if it has used static position
- Relative position with nested objects – What happens to elements inside relatively positioned element?
- Absolute position – Absolute position positions an element absolutely
- Absolute position – Elements positioned with absolute position can be positioned from their left, top, right, or bottom edges