準備 まずページと画像を準備します。次の画像を使用します。
次のように HTML を書くだけです。
CSS スタイルは次のようになります:
body{background:#999;} #容器{ 幅:960ピクセル; 背景:#fff; マージン:20px 自動; パディング:10ピクセル; 以下 |
は効果のプレビューです。
ロゴを配置するときは、その位置をコンテナーに対して相対的に設定する必要があるため、相対配置を使用します。
#容器{ 幅:960ピクセル; 背景:#fff; マージン:20px 自動; パディング:10ピクセル; 位置:相対; |
配置 |
する あとは、ロゴをコンテナからはみ出すように水平に配置するだけです。
#ロゴ{ 位置:絶対; 左:-15px; これ |
で、ロゴがボックスの外側に表示されていることがわかります。