今更ですがPosition設定

NO IMAGE

イマイチ「position」の利用方法が分かりません。
ちょっとワザも含めてまとめてみました。

1)絶対配置 position:absolute
ページの四隅を基準に配置する

2)相対配置 position:absolute
このボックスが本来配置されるべき場所を基準に配置
{top:0; left:0;} ⇒場所をリセットする

親要素にrelativeを設定し、子要素にabsoluteを設定することで、親要素の配置が基準になる。

/*基準となるボックス*/
#box01 {
margin:0px;
padding:0px;
position: relative;
width:800px;}

/*基準のボックスに内包されるボックス*/
#box01 #box02 {
margin:0px;
padding:0px;
position: absolute;
top:-45px;
right:23px;}
position01.gif

CSS+htmlカテゴリの最新記事