XHTMLソース

<div id="whatsnew">
 <h2><img src="img/title_whatsnew.gif" alt="What's New" width="227" height="30" /></h2>
 <p class="rss"><a href="#"><img src="img/btn_rss.gif" alt="What's NewのRSSを取得" width="32" height="32" /></a></p>
 ...
</div>

CSSソース

#whatsnew {
     float: left;
     width: 396px;
     background: #F8F4EB url(../img/bg_whatsnew.gif) no-repeat right top;
}
#whatsnew p.rss {
     position: relative;
     height: 14px;
     margin: 0;
}
#whatsnew p.rss a {
     position: absolute;
     top: -50px;
     right: 27px;
}

CSSソース（#whatsnewを基点とした方法）

#whatsnew {
     float: left;
     width: 396px;
     background: #F8F4EB url(../img/bg_whatsnew.gif) no-repeat right top;
     position: relative;
}
#whatsnew p.rss {
     position: absolute;
     top: 23px;
     right: 27px;
}

• 第3章 用途と目的に合わせたレイアウトの法則