• 締切済み

画像の上に画像

HPでcenterで例えば600サイズの外枠をつくりその中にHPの内容を表示するようにしています。 その中のひとつの写真(jpg)の上に画像(gif)を重ねて表示したいのですがスタイルシートで位置を指定したときに下記のように指定するとその指定した部分(jpg画像の上の部分)のスペースが画像のサイズ分空いて指定したところへ画像は重なります。 その空いてしまうスペースをなくしたいのですがどうにもなりませんでした。absoluteもfixedも試しましたがこれだとウィンドウサイズによって位置がずれるようです。 <span style="position: relative; left:15px; top:455px;z-index:1;">  <img src="./images/***.gif" border="0"></span> <td><img src="./imeges/***.jpg" ></td> すごく困ってしまっています。知っている方教えてください。

みんなの回答

  • mat-21
  • ベストアンサー率56% (91/162)
回答No.2

まず、レイヤー(position)をそのままでは、左上からのレイアウトしかできないので、センターでのレイアウトはテクニックが必要です。つまり、ブラウザ画面を横に延ばしても、センターになくてはならないレイヤー難しいのです。だからよく大手の企業のHPでは左詰のデザインが多いかと思います。 レイヤーをセンター揃えで使いたい場合は、 <body> <div style="text-align:center"> <div style="width:600px; margin:0px auto;"> <div style="position:relative; left:0px; top:0px; width:600px; z-index:1;"> <div style="position:absolute; left:0px; top:0px; width=???px; height=???px; z-index:2;"><img src="./imeges/***.jpg" ></div> <div style="position:absolute; left:15px; top:455px; width:???px; height:???px; z-index:3"><img src="./images/***.gif" border="0"></div> </div> </div> </div> という感じになります。

  • kosa
  • ベストアンサー率25% (379/1464)
回答No.1

テーブルの背景にJPGを使用して、セルの中にGIFを入れれば同様のことができるのではないでしょうか?