18.5. Element Layers
CSS also supports a third dimension for elements, allowing you to control what elements are placed on top of what elements. You can usually anticipate how elements will stack and leave control of the stacking up to the user agent. However, if you want more control over the element stack, you can use the z-index property to specify an element's position in the stack.
Named for the stacking dimension (z-axis), this property has the following syntax:
z-index: <integer> | auto;
If an integer is specified as the value for the z-index property, the affected elements will be stacked accordingly—elements with higher z-index values are stacked on top of elements with lower z-index values.
Figure 18-14 provides an illustrative example of how elements stack given different z-index values, using the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Element Stacking</title> <style type="text/css"> p { width: 400px; height: 200px; padding: 5px; border: 1px solid black; background-color: white; position: absolute; } .zlevelone { left: 200px; top: 100px; z-index: 1; } .zleveltwo { left: 250px; top: 150px; z-index: 2; } .zlevelthree { left: 300px; top: 200px; z-index: 3; } </style> </head> <body> <p><b>z-index: 0 (default)</b><br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ...Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
