Share this Page URL
Help

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

The Box Model: Styles for Dimensions, Borders, Margins, and More 188 · right--The element's position from the right side of the browser window, if you're using posi- tion: absolute. Note that this value has no effect if you're using position: relative. · bottom--The element's position from the bottom of the browser window, if you're using posi- tion: absolute. This value has no effect if you're using position: relative. · left--The element's position from the left side of the browser window (if you're using posi- tion: absolute) or to the left of the element's natural position in the page (if you're using position: relative). The following page (ssposit.htm on the CD in this book) tries out some absolute and relative posi- tioning, and Figure 16.6 shows what happens in Netscape 4. <HTML> <HEAD> <TITLE>Style Sheet Positioning</TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- DIV {font-family: Arial; font-size: 16pt} --> </STYLE> <BODY> <DIV STYLE="position: absolute; left: 600px; top: 150px">Section 1</DIV> <DIV STYLE="position: absolute; left: 100px; top: 100px">Section 2</DIV> <DIV STYLE="position: absolute; left: 500px; top: 50px">Section 3</DIV> <DIV STYLE="position: absolute; left: 50px; top: 0px">Section 4</DIV> This is regular text. Even though it comes after all those &lt;DIV&gt;