CHAPTER 9 ■ POSITIONING: ADVANCED
Top Aligned
HTML
<h1>Top Aligned</h1>
<div class="gp">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="zs" class="ex"><span>Sized Static Block</span></div>
<div id="ws" class="ex"><span>Shrinkwrapped Static Block</span></div>
<span id="za" class="ex"><span>Sized Absolute</span></span>
<div id="wa" class="ex"><span>Shrinkwrapped Absolute</span></div>
<span id="sa" class="ex"><span>Stretched Absolute</span></span></div></div>CSS
.gp { position:relative; height:300px; width:700px; 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;
width:120px; text-align:center; position:relative; }
.ex span { left:0; width:130px; height:auto; }#zs { height:100px; margin-top:0; margin-bottom:auto;
position:static; }
#ws { height:auto; margin-top:0; margin-bottom:auto;
position:static; }
#za { height:100px; top:0; margin-top:0; bottom:auto; margin-bottom:auto;
position:absolute; margin-left:200px; }
#wa { height:auto; top:0; margin-top:0; bottom:auto; margin-bottom:auto;
position:absolute; margin-left:355px; }
#sa { height:auto; top:0; margin-top:0; bottom:0; margin-bottom:0;
position:absolute; margin-left:510px; }