効果的に画像を重ねて使うCSS方法

画像を重ねて表示するとは？

例えば次の画像のように、「商品」の画像と「送料無料」の画像 2枚を重ねて表示するような場合を言っています。

サンプルを用意しました。（サンプルをご覧ください）

効果的に画像を重ねて使う方法（1）
▼コチラのサイトを参考にしました▼
http://kumacrow.blog111.fc2.com/blog-entry-492.html#comment878

①HTMLコード

<a href="～"><img src="（画像1）" width="240" height="240" /></a><br />
<a href="～"><img src="（画像2）" class="souryou" width="140" height="30" /></a>

②CSSコード

.souryou {
 position: relative;
 top: -55px;
 left: 195px;
}

画像1が背面に配置する画像で、画像2が前面に配置する画像です。そして、画像2には classで「souryou」を指定します。

クラス名「souryou」では、position（配置）プロパティで、relative（相対配置）を行っています。画像の大きさにあわせて、数値を変更します。

ちょっと問題なのが、「position: relative;」している画像の大きさだけ、画像同士の間が空いてしまいます。

効果的に画像を重ねて使う方法（２）

（1）の方法よりもいい方法を

①HTMLコード

<div class="goods">
<a href="～" class="goods-menu"><img src="（画像1）" width="240" height="240" /></a>
<a href="～" class="order"><img src="（画像2）" width="140" height="30" /></a>
</div>

②CSSコード

.fw_cellin_3 a{display: block; }

.fw_cellin_3 {
	margin-bottom: 5px;
	width:240px;
        height: 24px;
        position: relative;
	color:#333;
	text-align:center;
	font-weight:bold;
	font-size:12px;
}
a.goods-menu {
 border: 1px solid #777;
 width: 250px;
 height: 188px;
}
a.order {
 position: absolute;
 top: 133px;
 left: 195px;
 width: 50px;
 height: 50px;
}

サンプルを用意しました。（サンプルをご覧ください）