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!