<![CDATA[<!DOCTYPE html>
<!-- Fig. 4.10: positioning2.html -->
<!-- Relative positioning of elements. -->
<html>
<head>
<meta charset = "utf-8">
<title>Relative Positioning</title>
<!--
Elements are positioned using the top, bottom, left, and right
properties. However, these properties will not work unless
the position property is set first.
see:
https://www.w3schools.com/css/css_positioning.asp
-->
<style type = "text/css">
p { font-size: 1.3em;
font-family: verdana, arial, sans-serif; }
span { color: red;
font-size: .6em; }
.super { position: relative;
top: -1ex; }
.sub { position: relative;
bottom: -1ex; }
.shiftleft { position: relative;
left: -1ex; }
.shiftright { position: relative;
right: -1ex; }
</style>
</head>
<body>
<p>The text at the end of this sentence has an <span>x (unpositioned)</span>.</p>
<!--
When position is set to relative , the top property specifies
the distance the element's top edge is moved below its
normal position.
-->
<p>The text at the end of this sentence
<span class = "super">is in superscript</span>.</p>
<!--
When position is set to relative , the bottom property specifies
the distance the element's bottom edge is moved above its
normal position.
-->
<p>The text at the end of this sentence
<span class = "sub">is in subscript</span>.</p>
<!--
When position is set to relative, the left property specifies
the distance the element's left edge is moved to the right
from its normal position.
-->
<p>The text at the end of this sentence
<span class = "shiftleft">is shifted left</span>.</p>
<!--
When position is set to relative, the right property specifies
the distance the element's right edge is moved to the left
from its normal position.
-->
<p>The text at the end of this sentence
<span class = "shiftright">is shifted right</span>.</p>
</body>
</html>
<!--
**************************************************************************
* (C) Copyright 1992-2012 by Deitel & Associates, Inc. and *
* Pearson Education, Inc. All Rights Reserved. *
* *
* DISCLAIMER: The authors and publisher of this book have used their *
* best efforts in preparing the book. These efforts include the *
* development, research, and testing of the theories and programs *
* to determine their effectiveness. The authors and publisher make *
* no warranty of any kind, expressed or implied, with regard to these *
* programs or to the documentation contained in these books. The authors *
* and publisher shall not be liable in any event for incidental or *
* consequential damages in connection with, or arising out of, the *
* furnishing, performance, or use of these programs. *
**************************************************************************
-->
]]>