Demo

if value of position property is absolute or fixed, then that element is removed from dom, so next element of that element which is specified as absolute or fixed will replace of that element. It will overlap.

See the Pen CssLayout-Position-Demo9 by kenanhancer (@kenanhancer) on CodePen.

---

See the Pen CssLayout-Position-Demo22 by kenanhancer (@kenanhancer) on CodePen.

Example 1 (position: absolute;)

See the Pen CssLayout-Position-Demo1 by kenanhancer (@kenanhancer) on CodePen.

Example 2 (position: absolute;)

See the Pen CssLayout-Position-Demo2 by kenanhancer (@kenanhancer) on CodePen.

Example 3 (position: absolute;)

if position is absolute, then it will stay in same position with next element. So absolute position will be overlap on next element as below;

See the Pen CssLayout-Position-Demo3 by kenanhancer (@kenanhancer) on CodePen.

Example 4

See the Pen CssLayout-Position-Demo4 by kenanhancer (@kenanhancer) on CodePen.

Example 5

See the Pen QWKzgOr by kenanhancer (@kenanhancer) on CodePen.

Example 6

See the Pen CssLayout-Position-Demo6 by kenanhancer (@kenanhancer) on CodePen.

Example 7: Setting height property can cause overflow issue

See the Pen CssLayout-Position-Demo7 by kenanhancer (@kenanhancer) on CodePen.

Example 8: Solving overflow issue

See the Pen CssLayout-Position-Demo8 by kenanhancer (@kenanhancer) on CodePen.