CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED
Aligned and Offset Absolute
HTML
<h1>Aligned and Offset Absolute</h1>
<div>
<p id="lt">Left-top Aligned & Offset</p>
<p id="lb">Left-bottom Aligned & Offset</p>
<p id="cm">Center-middle Aligned</p>
<p id="rt">Right-top Aligned & Offset</p>
<p id="rb">Right-bottom Aligned & Offset</p>
</div>CSS
div { position:relative; }#lt { position:absolute;
width:auto; left:0; margin-left:8px; right:auto; margin-right:auto;
height:auto; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; }
#lb { position:absolute;
width:240px; left:0; margin-left:8px; right:auto; margin-right:auto;
height:18px; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; }
#cm { position:absolute;
width:200px; left:0; margin-left:auto; right:0; margin-right:auto;
height:18px; top:0; margin-top:auto; bottom:0; margin-bottom:auto; }
#rt { position:absolute;
width:220px; left:auto; margin-left:auto; right:0; margin-right:8px;
height:18px; top:0; margin-top:8px; bottom:auto; margin-bottom:auto; }
#rb { position:absolute;
width:auto; left:auto; margin-left:auto; right:0; margin-right:8px;
height:auto; top:auto; margin-top:auto; bottom:0; margin-bottom:8px; }/* Nonessential rules are not shown. */