MMDT1021 Chapter 11 Notes - page 1

 

The book is pretty straight forward presenting the material in this chapter.  These notes are just to clarify a few things that are not obvious.

Positioning Elements Absolutely

Code Page
Here is the original document.  The objects get added to the page in their natural flow layout Result
Source
Here is the document has been changed by absolutely positioning the images.  The objects get added to the page based on the pixel coordinates.  However some text gets covered up. Result
Source

Positioning Elements in 3D

Code Page
The objects get added to the page based on pixel coordinates.  The z order height determines if one object is behind another or not.  The higher the z-order, the closer it is to you. Result
Source
Note:  I found what appears to be a bug.  Some older browsers (old versions of Firefox) don't render layers with negative z-values. So it would be best to use only positive z-values if possible.

Note: Z-index only works on elements that have been positioned (eg position:absolute;)!

Scrolling and positioning an object

Code Page
Here the object size is set and scrolling is enabled for the overflow.  Also an image is positioned and stays static even though the content moves. Result
Source