CHAPTER 9 ■ POSITIONING: ADVANCED
Right Offset
HTML
<h1>Right Offset</h1>
<div class="gp">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="zs" class="ex"><span>Sized Static Block: +50px</span></div>
<div id="ss" class="ex"><span>Stretched Static Block: +50px</span></div>
<span id="za" class="ex"><span>Sized Absolute: -50px</span></span>
<span id="wa" class="ex"><span>Shrinkwrapped Absolute: -50px</span></span>
<span id="sa" class="ex"><span>Stretched Absolute:-50px</span></span></div></div>CSS
.gp { position:relative; height:295px; width:600px; border:2px solid black; }
.parent { margin:10px; padding:10px; padding-top:0; border:1px solid black; }
.ex { padding:5px; border:5px solid black; background-color:gold; }
div.ex span { margin-right:-60px; border:1px dotted black; }
span.ex span { margin-right:30px; border:none; }#zs { position:static; text-align:right; margin-top:5px;
width:400px; margin-left:auto; margin-right:50px; }
#ss { position:static; text-align:right; margin-top:5px;
width:auto; margin-left:0; margin-right:50px; }
#za { position:absolute; text-align:right; top:0; margin-top:155px;
width:400px; left:auto; margin-left:auto; right:0; margin-right:-50px; }
#wa { position:absolute; text-align:right; top:0; margin-top:200px;
width:auto; left:auto; margin-left:auto; right:0; margin-right:-50px; }
#sa { position:absolute; text-align:right; top:0; margin-top:245px;
width:auto; left:0; margin-left:0; right:0; margin-right:-50px; }