• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Layers and Positioning

Chapter 14. Layers and Positioning

Layers enable you to control the exact position of your elements on a Web page. A layer is basically a container for HTML content, delineated by the <div> or <span> tag, that you can position anywhere on a page. Unlike table cells, you can make layers overlap, or stack on top of one another. You can also use separate layers to make objects appear, disappear, or even move across your page.

Layers are called layers because they can be positioned in three dimensions. You can set an absolute or relative location for a layer along the page's X and Y axes. The third dimension is called the Z-index, which allows layers to overlap one another (Figure 14.1).

Figure 14.1. This little collage is made with three layers, positioned so that they overlap in the browser window. Can't do that with tables!

Designers really love layers for their versatility: they make Web pages more dynamic. For example, you can hide layers (through visibility), or even parts of layers (with the Z-index or with clipping areas) when a page initially loads. Then you can write a script that will cause the hidden areas to appear after a certain amount of time or when a certain user event happens (see Chapters 16 and 17 for information on Behaviors and Timelines).


Browsers prior to IE or Netscape 4.0 will display the content of a layer. However, they ignore most layer properties, including positioning. See Appendix C on the Web site to find out how to accommodate older browsers.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint