with higher Z-Indexes appear above layers with lower Z-Indexes. [View full size image]   Vis: Select from the four options in this menu to set the visibility of the layer. Options include Default (which is essentially the same as Inherit), Visible (which makes the layer visible), Hidden (which hides the layer and the content within it), and Inherit (which assumes the visibility property of the parent layer when the layer is nested). If a layer is not nested within another layer, the default of Visible kicks in. When a layer is hidden, you'll want to use a scripting language such as JavaScript (the Show/Hide Layer behavior in Dreamweaver's case) to dynamically set the visibility property of the layer. Bg image: Use the Browse to Folder icon to find and select an image to use as the layer's background. Background images in layers are treated the same as the page and tables in that images smaller than the size of the layer end up tiling. Of course, you can always use the Repeat property in CSS to set how the background image for a layer tiles or repeats. Bg color: Choose a color from this color picker to set the background color of the layer. Leave this option blank to make the layer transparent. Class: When working with CSS, pick a class from this menu to change the style of the layer according to the rule set out within the selected class. Overflow: Select an option from this menu to set how the browser should treat a layer when the content exceeds the width or height of the layer. Options include Visible, Hidden, Scroll, and Auto. Choosing Visible forces the browser to stretch the layer to accommodate the content in the layer. Choosing Hidden forces the browser to automatically crop the excess content when it exceeds the width or height of the layer. Choosing Scroll forces the browser to automatically add a scrollbar at the right and bottom of the layer. These scrollbars appear even if the content in the layer doesn't exceed the width or height of the layer. Choosing Auto forces the browser to automatically add a scrollbar at the right of the layer only if the content exceeds the height of the layer and to add a scrollbar to the bottom of the layer only if the content exceeds the width of the layer. Clip: Enter values in these text boxes to define the visible area of the layer. You can specify values for the Left, Top, Right, and Bottom coordinates to "clip" off content within the layer. As you'll see throughout the chapter, a layer is nothing more than a <div> or <span> tag complete with a unique ID and a document-wide style rule (by default). Modifying properties in the Properties Inspector simply changes the document-wide style rule accordingly. To demonstrate this, switch to Code view. As you can see from Figure 11.8, each layer is nothing more than a <div> tag with an ID and a document-wide style rule. Figure 11.8. Layers are nothing more than a <div> or <span> tag complete with a unique ID and an inline style rule. [View full size image]   You're probably thinking that inline styles aren't the best way of manipulating properties for layers. If that's what you're thinking, you're right! Assuming that you were developing your site entirely in layers, changing all the layer's properties in your site would be a nightmare if all the styles were developed inline. A much better alternative is to create an ID within a style sheet that defines layer properties similar to the styles you'd use in the document-wide method. When you want to make global properties adjustments (such as positioning properties), you make them once in the style sheet and you're done. We'll demonstrate this process later in the chapter.