This is id black
I can set the black div left position to 0px from the left end of the document and its top position 200px from the top of the document.
This is id red - fixed position
I can set the red div right position to 10px from the right end of the document and its bottom position 10px from the bottom of the document.
We can position any element anywhere on a webpage using various CSS properties. In this example, we are positioning most divs using the position CSS property with the value of absolute. In addition to the position property, we also use a top, right, bottom, or left property.
To test these positioned elements, press F11 on your browser to view full screen or zoom in and out with ctrl+ and ctrl-. Notice how absolute elements stay in place. The browser window is currently their parent element.
You can change this, however, by changing the position element of a parent element to absolute, relative, or fixed. In this case, if you change the container's position property to relative, all the divs will be placed at their positions within the container.
Study the code and you will notice you can specify the top, bottom, right, or left pixel position of any element. In addition, you can also use z-index to set the layer order for the element (which element is on top). Z-index only works when an element is positioned (absolute, relative, or fixed). Highest z-index value goes on top!
To get credit, You must add 4 divs and position them using absolute positioning.