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>