[css]親ボックスからはみ出して表示させるスタイルシート

仕事で使うことがあったのでメモメモ。



上の図のように親ボックスから画像等をはみだして表示させたいときcss記述。

#sample img.move{
float:right;
zoom:1;　// IE6
position:relative;　// IE6
margin:-30px -30px 0 1.2em;
}

marginの値をマイナスにするだけでもできるけどIE６でうまいこと表示されないので上記のような記述になります。一応HTMLも下記に。

<div id="sample">
<img src="./tt.jpg" alt="" />
<p>テキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキスト</p>
</div>

こんな感じで。

float:right;