ブログ練習帳ブログ練習帳かけだしWebデザイナー見習のボロボロブログホームブログ練習帳についてわたしのサイト見習い奮闘記くつろぐ、たびログ新しい記事お問い合わせCSSを使って写真を拡大する(2)前回のお話に引き続き、写真の拡大です。サムネイル画像をマウスオーバーすると、大きい写真が入れ替わる、というの、やってみます。ECサイトとかで、商品の説明がたくさん切り替わるっていうのですよね?かっこいー。(E)(←括弧イーです。{display:block;position:absolute;top:0px;left:-400px;}▼サンプルはこちらCSSその1とその2の違いは、.bigで指定された拡大画像の位置です。absoluteで指定しているので、その親ボックスがどれかということが重要になります。その1では、#outerにrelativeが指定してあるので、#outerが親ボックスです。olの左に大きい画像を表示させますが、その余白をpaddingでとったので、position:absoluteを使用していません。その2では、olの左に拡大画像用のスペースを確保するのに、position:absoluteを利用して、olの位置指定しています。いうことで.bigの親ボックスが#outerではなくolになります。-400pxも左へ移動しなければならないということです。考えていくと、positionって、どこが親ボックスなのかということが、とっても重要なのかなぁと思う見習です。