Share this Page URL

Chapter 16. The Box Model: Styles for Di... > Where the Box Goes: Working with Pos... - Pg. 189

The Box Model: Styles for Dimensions, Borders, Margins, and More 189 Style sheets understand not just the usual 2-D positioning, but also positioning in the third dimension. It sounds like science fiction, but all it really means is that you can "stack" elements on top of each other for interesting effects. The style property that controls this is called z-index. An element with a higher z-index value is displayed "on top" of an element with a lower z-index value. Here's an example (see sszindex.htm on the CD in this book): <HTML> <HEAD> <TITLE>Style Sheet 3-D Positioning</TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- DIV {font-family: Arial; font-size: 12pt} --> </STYLE> <BODY> <IMG SRC="home2.gif" STYLE="z-index: 0; position: absolute; left: 100px; top: 10px"> <DIV STYLE="z-index: 1; position: absolute; left: 10px; top: 30px"> <B>This text appears on top of the image.</B> </DIV> </BODY> </HTML> Figure 16.7 shows how it looks in the browser. Figure 16.7. Use the z-index property to place one element "on top" of another. The Least You Need to Know · The bits of the box. The invisible box around each block element has six components: content (what's inside), dimensions (the height and width), padding (the space around the content), border (the line around the box), margin (the space outside the box), and position (where the box appears in the page). · The box dimensions. Use the height and width properties. · The box padding. Use the padding-top, padding-right, padding-bottom, and padding-left properties, or use the padding shortcut property. · The box border width. Use the border-top-width, border-right-width, border-bottom- width, and border-left-width properties, or use the border-width shortcut property. · The box border style. Use the border-top-style, border-right-style, border-bottom- style, and border-left-style properties, or use the border-style shortcut property. · The box border color. Use the border-top-color, border-right-color, border-bottom- color, and border-left-color properties, or use the border-color shortcut property. · The box margin. Use the margin-top, margin-right, margin-bottom, and margin-left proper- ties, or use the margin shortcut property.