Layers and the “Bounding Box”

When the browser draws an object on a page, it places it into an invisible rectangular space called a “bounding box.” You can set the box’s exact location on the page or offset it from other objects on the page. As mentioned in the previous slides, you can also specify the size of the box.
With CSS, these boxes can be stacked one on top of another as layers. Horizontal and vertical positioning happen along the X and Y axes, and the layered positioning happens along the Z axis.
The Z axis is set using the CSS style z-index, which allows you to specify which layer appears on top of the others. By setting the z-index higher or lower, an object can move up and down a stack. The higher the z-index, the more “on top” it is.

When the browser draws an object on a page, it places it into an invisible rectangular space called a “bounding box.” You can set the box’s exact location on the page or offset it from other objects on the page. As mentioned in the previous slides, you can also specify the size of the box.