In the previous assignments, we learned about absolute positioned and relative positioned elements. These position properties allow you to place elements at various locations on your web page. They work differently:
Absolute and relative positioning are useful on their own, but it is when you use them together that you can do some exciting things.
In this assignment, we will create a parent div with the id set to container. Within the parent div, we will create several other divs. We often call the inner divs children elements. We will then position the children elements using absolute positioning. When we do this, the children elements are no longer "locked" inside the parent div. They are positioned within the browser window (viewport).
This is not unusual. It is was we learned previously. However, since the children elements are coded inside the parent div (container), if we position relative the container, the children divs get locked inside.
To complete this assignment, add 4 more divs within the container. Use absolute positioning on the 4 new divs. Once you are done, add the position property to the container and set it to relative. You will see how all divs, get locked into the container.