Spring Into HTML and CSS

Z-index

The z-index creates the dimensional axis upon which you can “stack” and overlap items. This comes in handy in positioning because you can use it to determine which boxes come to the foreground and which ones will flow behind upon browser resize. Other uses for the z-index relate mostly to DHTML, in which element boxes are scripted for dynamic purposes such as when creating animations or games.

Example 12-10 shows three boxes, each absolutely positioned to overlap one another and styled in such a way that you can visualize the stacking order.

Example 12-10. Z-index with positioned boxes

#box1 {          position: absolute;          top: 10px;          left: 10px;          background: #000;          width: 300px;          height: 200px; ...