Position Property Lab

In this lab, you will practice the position property in CSS.

Position property is used to define how an element is positioned on the page. The position property works with top, bottom, left, and right, which specify the position relative to the nearest positioned parent element.

There are several types of positioning:

1. Static (default): Elements are rendered in the order they appear in the source code.
2. Relative: Elements are positioned relative to their normal position.
3. Absolute: Elements are positioned relative to the nearest positionedancestor.
4. Fixed: Elements are positioned relative to the browser window.

In this lab, you will create a div with id container and position 3 child divs using static, relative, and absolute positioning. Follow the challenges to position the elements properly.

PRO TIP: Once you've made the boxes as per the challenge, try and visualize yourself and justify why the box placement in the browser preview. This would help you think on how the styles would be applied before writing them down.