Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


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

4. Introduction to Cascading Style Sheet... > 4.6. Positioning Elements: Absolute ...

4.6. Positioning Elements: Absolute Positioning, z-index

Before CSS, controlling element positioning in HTML documents was difficult—the browser determined positioning. CSS introduced the position property and a capability called absolute positioning, which gives you greater control over how document elements are displayed. Figure 4.9 demonstrates absolute positioning.


 1   <!DOCTYPE html>
 2
 3   <!-- Fig. 4.9: positioning.html -->
 4   <!-- Absolute positioning of elements. -->
 5   <html>
 6      <head>
 7         <meta charset = "utf-8">
 8         <title>Absolute Positioning</title>
 9         <style type = "text/css">
10            .background_image { position: absolute;
11                                top: 0px;          
12                                left: 0px;         
13                                z-index: 1; }      
14            .foreground_image { position: absolute;
15                                top: 25px;         
16                                left: 100px;       
17                                z-index: 2; }      
18            .text             { position: absolute;
19                                top: 25px;         
20                                left: 100px;       
21                                z-index: 3;        
22                                font-size: 20pt;
23                                font-family: tahoma, geneva, sans-serif; }
24         </style>
25      </head>
26      <body>
27         <p><img src = "background_image.png" class = "background_image"
28            alt = "First positioned image" /></p>
29
30         <p><img src = "foreground_image.png" class = "foreground_image"
31            alt =       "Second positioned image" /></p>
32
33         <p class = "text">Positioned Text</p>
34      </body>
35   </html>


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint