Relative positioning of elements : position relative : Layout Attributes HTML CSS TUTORIALS


HTML CSS TUTORIALS » Layout Attributes » position relative »

 

Relative 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>Relative Positioning</title>

      <style type = "text/css">

          p           font-size: 1.3em;
                       font-family: verdana, arial, sans-serif }

          span        color: red;
                       font-size: .6em; 
                       height: 1em }

         .super      position: relative;
                       top: -1ex }

         .sub        position: relative;
                       bottom: -1ex }

         .shiftleft  position: relative;
                       left: -1ex }

         .shiftright position: relative;
                       right: -1ex }

      </style>
   </head>

   <body>

      <p>this is a test. 
      <span class "super">is in superscript</span>.</p>

      <p>this is a test. 
      <span class "sub">is in subscript</span>.</p>

      <p>this is a test. 
      <span class "shiftleft">is shifted left</span>.</p>
   
      <p>this is a test. 
      <span class "shiftright">is shifted right</span>.</p>

   </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Layout Attributes
» position relative