Приглашаем посетить
Культура (niv.ru)

Z-index

Previous Page
Table of Contents
Next Page

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;
          z-index: 1;
          }

#box2 {
          position: absolute;
          top: 20px;
          left: 20px;
          background: #999;
          width: 300px;
          height: 200px;
          z-index: 2;
          }

#box3 {
          position: absolute;
          top: 30px;
          left: 30px;
          background: #ccc;
          width: 300px;
          height: 200px;
          z-index: 3;
          }

You'll note that the higher the number is, the "closer" the box appears in the stack. So, a box with a z-index of 3 appears to be the closest to you in the stack (see Figure 12-16).

Figure 12-16. Z-index and stacking orderthe higher the integer value is, the closer to you in the stack the element appears.

Z-index


    Previous Page
    Table of Contents
    Next Page