画像をかさねて表示させるには？

Question

初めて質問させていただきます。ＨＰを手打ちで一から作っています。デザイン上の理由からどうしても画像の上に画像を重ねる必要があり、relative,absoluteを駆使し、なんとかできたものの、それがFireｆoxではうまく表示されない事を知りました。色々検索すると、table内ではＦｉｒｅｆｏｘの場合、relativeが働かないとあり、愕然としました。しかし、下記のソースでは画像２の位置も思いどうりに配置できるのですが、肝心な製作中のＨＰ上では画像２がtableから飛び出してしまいます。ＨＰはがちがちのtableでレイアウトしており、できれば、今更floatなど使って構造を崩したくありませんし、さらに細かなtableも組みたくありません。検索するとうまく解決できた方もおられる様だったのですが、ヒントだけで私の頭では解決できませんでした。画期的な方法があればよろしくお願いしたいと思います。

<html>
<head>
<style type="text/css">
.side-box {
position:relative;
background-repeat:no-repeat;
}

.side-box2 {
position:absolute;
top:12px; left:12px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<div class="side-box">
<img src="画像１">
<span class="side-box2">
<img src="画像２">
</span>
</div></td>
</tr>
</table>
</body>
</html>

kimny3 · Accepted Answer

こんにちは。

Firefoxのバージョンはいくつで確認していますか？
こちらは8.0.1 Macで確認していますが、ちゃんと重なって
いるようです。対象のバージョンにもよるのかもしれませんね。

当方では添付ファイルの様に表示されています。
意図されているのが違うようであれば、完成イメージをもう
少し細かく教えて頂ければお伝えしやすいと思います。

また、ちょっと荒技ですが、どちらもrelativeにして、topを
-○○px;と指定するのもアリだとは思います。

DrFell · Answer

>単なるコーディングの間違いで表示できないのか、 >それとも未だにFirefoxではtableの中でrelativeが >うまく働かないのかを知りたいのです。ご自分で答えがでているのでは？単なるコーディングの間違いでしょう。現に、アップされたソースではtableの中のrelativeが働いているのですから、原因は違うところにあることは、明白。組み合わせで出現するバグもありますが、それには困っている現状が確認できる最小限のソースがないと、アドバイスはでません。そして、困っていることが出現するか否かの差異を自分で探るうちに、自己解決できることも多いです。 >少々複雑なtableでレイアウトしてて、そのセルの >一角に背景（またはイメージ）を埋め込み、その上 >に色々な別の画像を配置し、表示しようとしている >わけです。じゃあ、素直に、そのセルの背景として、背景を表示し、コンテンツとして、上のイメージを表示させれば、何の問題もないのでは？

>スキルが未熟なせいでどこがいけないのか見当がつきません。かといって全ソースを掲載するわけにもいきません。また、cell-padding,cell-specingやcssでの同様な機能をすべて無効にしてもうまく表示できないのでお手上げ状態です。 cssのｃを配慮していますか？その表へのcssの問題の箇所以外をすべて削って上手くいかないのなら、継承などの問題があるかもしれませんね。ソースがないとどうしようもないです。 >かと言って掲載したソースの簡単な表のなかではう >まく表示できるのに... だから、着目点と違う場所が間違っているのでは？ >それとできれば「この時はこうすればいいよ」みた >いなスキルがあれば助言をお願いしたいと思います。検索するとうまく解決できた方もおられる様だったのですが、ヒントだけで私の頭では解決できませんでした。になるだけではないでしょうか。ソースを出せばいいのでは？無理なら、近くにいる詳しい人に聞く。いなければ、プロに頼む。教室に行く。技術的Q&Aサイトでは、的を射た質問には、的を射た答えが、わからないことがわからない質問には、無視されるか、質問がわかりませんという答えにしかなりません。意地悪をしているわけではないので、ご理解ください。＃2さんの質問には答えておられないし、ソースも出さないとなれば、Q&Aでの問題解決は困難といわざるをえないです。難しいスキルではないのですが、素直さは必要ですね。

taloo · Answer

期待通りに表示されるソースを提示して、期待通り表示されないケースの修正方法を聞かれても何も答えられません。

期待通り表示できない方のソースを、補足をお願いします。

ORUKA1951 · Answer

frefoxの挙動が正しいです。
表でないものを、デザインのために表を使っているでしたら、そもそもの間違いです。

それを見直せば簡単です。

そもそもその画像の意味づけを含めて詳細を教えてください。

画像をかさねて表示させるには？

こんにちは。

この回答への補足

>単なるコーディングの間違いで表示できないのか、

この回答への補足

期待通りに表示されるソースを提示して、期待通り表示されないケースの修正方法を聞かれても何も答えられません。

この回答への補足

frefoxの挙動が正しいです。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング