Positioning - Absolute

A029j2

This is id black

I can set the black div leftposition to 0px from the left end of the document and its topposition 200px from the top of the document.

This is id orange
This is id gold
This is id purple
This is id green

This is id red - fixed position

I can set the red div rightposition to 10pxfrom the right end of the document and its bottomposition 10pz from the bottom of the document.

We can position any element anywhere on a webpage using various CSS propterties, 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 propery.

To test these positoned elements, press F11 on your browser to view full sreen or zoom in and out with ctrl+ and crtl-. 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 laced 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 layerorder 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. smahf-s648@chusd.org