position レイアウト

position: abusolute;

position: abusolute;が設定された要素は通常の配置として扱われるのではなく、「基準ボックス」というものを基点として自由に配置することが出来ます。

①絶対配置したい要素にposition: absolute;を設定する
#content {
width: 100px;
position: absolute;
right: 0;  /*右上に配置する*/
top: 0;
}

このままだとブラウザウィンドウを基準にしてしまうので、親要素を基準ボックスとする(今回#contentの親要素は#wrapperとする)

②基準ボックスを設定する
#wrapper {
width: 200px;
position: relative; /*これによって基準ボックス化する*/
}

この2つの設定によって#contentは#wrapperの右上に配置されます。

#wrapperを青、#contentを赤にして表示してみました。
f:id:retail:20150421223212p:plain

ここからright,topの値を変更し#contentを好きなところへ配置させることが出来ます。

広告を非表示にする