<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Absolute Inside Relative</title>
<link rel="stylesheet" href="genstyle.css" type="text/css">
<style>
img.ufo { position: absolute; top: 0.5em; left: 0.5em; }
p.comment { position: absolute; bottom: 5pt; right: 5pt; width: 50% }
div.ubox > div { width: 25em; height: 15em; position: relative; }
</style>
</head>
<body>
<h1>Absolutely Within</h1>
<p style="width: 80%; position: relative; left: 10%;
border: 2px dotted rgb(53%,7%,7%); padding: 2pt;
text-align: center; ">
Objects can be absolutely positioned within a box which is
relatively positioned.
</p>
<div class="ubox">
<div style="background-color: rgb(100%,67%,67%);">
<img class="ufo" src="Ricardo_UFO.png">
<p class="comment">Clearly, the aliens are landing from the upper
left corner of this frame.
</p>
</div>
<div style="background-color: rgb(67%,100%,67%); left: 40%; top: -3em;">
<img class="ufo" src="Ricardo_UFO.png">
<p class="comment">Well, they lowered the frame, but don't
seem to have lowered their ship much.</p>
</p>
</div>
<div style="background-color: rgb(67%,67%,100%); left: 5%; top: -7em;">
<img style="position: absolute; top: 2em; left: 1em"
src="Ricardo_UFO.png">
<p class="comment">Well, they've made a little
downward progress now.
</p>
</div>
<div style="background-color: rgb(67%,100%,100%); left: 50%; top: -6em;">
<img style="position: absolute; top: 6em; left: 2em"
src="Ricardo_UFO.png">
<p class="comment">Ah, that's better.</p>
</div>
</div>
</div>
<!-- Each of the <div>'s above is relative. Their natural positions
form a stack at the left margin. The left: an top: position
attributes move them relative to that "natural" position. -->
</body>
</html>