Absolute positioning of elements : position absolute : Layout Attributes HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout Attributes » position absolute »

 

Absolute positioning of elements


 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Absolute Positioning</title>
   </head>

   <body>

      <p><img src = "http://www.navioo.com/style/logo.png" style = "position: absolute; 
         top: 0px; left: 0px; z-index: 1"  
         alt = "First positioned image" /></p>
      <p style = "position: absolute; top: 50px; left: 50px; 
         z-index: 3; font-size: 20pt;">Positioned Text</p>
      <p><img src = "http://www.navioo.com/style/logo.png" style = "position: absolute; 
         top: 25px; left: 100px; z-index: 2" alt = 
         "Second positioned image" /></p>

   </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout Attributes
» position absolute