ブログ練習帳ブログ練習帳かけだしWebデザイナー見習のボロボロブログホームブログ練習帳についてわたしのサイト見習い奮闘記くつろぐ、たびログ新しい記事お問い合わせposition:absoluteを使うとき...どうして?っていわれるかもしれないですけど、なんか、position:absoluteを使って解決するのって、ずるいような、負けを認めたような、そんな感じがしてました。absoluteを使わなきゃ解決できないコードを書いたことがないからだと思います。fixed(スクロールせず、固定)があります。そのうち、自分で書く可能性が高いのはrelativeとabsoluteです。absoluteを使うときは、親ボックスが基準として使われ、その親ボックスにはstatic以外(とりあえずreletiveにしておけばOK)を指定しておかなければならないです。これが今回使うXHTMLソースです。小さい写真を囲むpにphotoというIDを付け、absoluteで位置指定します。この写真がどこへ移動するか見てみます。/></p></div></div></div>まず、どこにもposition:relativeをつけません。{position:absolute;left:10px;top:10px;}▼サンプルはこちら写真の位置は、ウィンドウの左上から10pxのところです。どこにもrelativeの指定がないので、ウィンドウが基準になっています。{position:absolute;left:10px;top:10px;}▼サンプルはこちら写真の位置は、ウィンドウの左上から10pxのところです。外側の#wrapにrelativeの指定があるので、1つめと同様にウィンドウが基準になっています。{position:absolute;left:10px;top:10px;}▼サンプルはこちら写真の位置は、#outerの左上から10pxのところです。#outerにrelativeの指定があるので、#outerが基準になっています。{position:absolute;left:10px;top:10px;}▼サンプルはこちら写真の位置は、#innerの左上から10pxのところです。#innerにrelativeの指定があるので、#innerが基準になっています。{position:absolute;left:10px;top:10px;}▼サンプルはこちら写真の位置は、#innerの左上から10pxのところです。#outerにも#innerにrelativeの指定がありますが、#outerは無視され、#innerが基準になっています。{position:absolute;left:10px;top:10px;}}▼サンプルはこちら写真の位置は、#outerの左上から10pxのところです。#outerにrelativeの指定があります。先ほど#innerに記述されたrelativeはstaticに変更です。#innerは無視され、#outerが基準になっています。position:absotuleで基準とする「親ボックス」というのは、直上の要素ということではなく、static以外を指定されている親ボックスということになるんでしょうか...。なんとなく、分かったような、またまた呪文が増えたような...。見習の道は厳しいものですぅ。