―（マイナス）マージンで重ねあわせる

今回のテクニックはマージンを使って重ね合わせてみます。 テーブルデザインだと、とんでもなく面倒なことも、スタイルシートなら割と簡単です！

テクニック使用前

テクニック使用後

テクニック使用後のソースは次のようになります。

div.sample1{
    border:solid 2px #663300;
    width:200px;
    background-color:#FFFFFF;
    position:relative;
}
h6.sample1{
    border:solid 2px #663300;
    width:120px;
    text-align:center;
    font-size:medium;
    background-color:#CC996F;
    margin:0px;
    margin-top:-10px;
    position:relative;
}
p.sample1{
    padding:0px 1em;
    text-align:left;
}

HTML
<div; class="sample1">
<h6; class="sample1">見出しです</h6>
<p; class="sample1">
本文です。これでも特に問題は無いのですが、もうちょっと手を加えてみましょう！
</p>
</div>

注目して欲しいのは赤字の部分です。
position:relative;を忘れるとIE6では上手く表示されないので、必ずつけてください。
margin:0px;はブラウザーによる崩れを防ぐために必要です。
margin-topの値はお好みでどうぞ。

なぜtopを使わないのか？

position:relative;を設定しているので、margin-topのかわりにtopを使っても同じ結果が得られそうですが、 上手くいきません。次のサンプルはmargin-top:-10px;のかわりにtop:-10px;をしたものです。

marginのときとは下に来る要素の位置の計算方法が違うため、表示が意図した通りにはなりません。 できないことはないですが、めんどくさいです。

---

使いこなすための＋α

上にずらす場合はmarginでしたが、横にずらす場合はどうしましょう？

marginで横にずらした場合

leftで横にずらした場合

私が確認した限りでは、どちらでも問題はないようです。
一括指定ができることを考えると、marginの方がいいと思います。
もし、上手くいかないなどの問題があれば報告お願いします。

---