- Relative positioning: Positions an element relative to its normal position. The element remains in the normal document flow but is shifted vertically or horizontally.
- Absolute positioning: Positions an element relative to the nearest positioned ancestor (other than
static
). The element is removed from the normal document flow.
/* Examples */ .relative-element { position: relative; top: 10px; /* Moves down by 10 pixels */ left: 20px; /* Moves right by 20 pixels */ } .absolute-element { position: absolute; top: 50px; /* Moves down by 50 pixels relative to the nearest positioned ancestor */ left: 100px; /* Moves right by 100 pixels */ }