ベストアンサー

CSSの重なり順って指定できますでしょうか？（画像です）

2006/03/07 18:51

現在CSSをコツコツと勉強中なのですが、壁にぶつかってしまいました・・・。 CSSで背景画像を指定したのですが、これらの画像の重なり合う順番って構うことは出来ますでしょうか？例えばですが、右に犬小屋の画像、左に犬の画像がありCSSで背景として重なり合わせた場合、犬小屋の上に犬が乗っかるようにしたいのです。（物凄い例ですのでCSSを使わなかったらとは言わないで下さいね）サイトをウロウロとしていたところ、Zインデックスという存在を知ったのですが、使い方がよく分からないというか、これで指定できるものなのでしょうか？当たり前の質問で申し訳ないのですが、ご存知に方がおられましたらアドバイスいただけたら幸いです。宜しくお願いいたします。

404not_found
お礼率61% (176/285)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#16352

2006/03/07 19:14 回答No.1

z-index:0; これが基点（基準）になります。この指定に対して -1、-2 と負の数を与えた要素は基点より背面に、この指定に対して 1、2 と正の数を与えた要素は基点より前面に表示されます。ですから、例えば犬小屋の背景画像を使う CSS に z-index:0; を与えて、犬には z-index:1; を与えれば犬小屋の上に犬が重なる、という事になります。当然、犬の方を -1 とした場合は犬小屋の下に犬が潜る形になります。

質問者

お礼 2006/03/07 19:38

kujax130さんありがとう御座います。早速試してみたのですが、firefoxだと上手く表示されるのですがIE6だと、そのままで表示されてしまいます。これはどうなのでしょうか？？質問ばかりですみませんが、z-index自体はw3c的に推奨要素なのでしょうか？表示が怪しいので・・・？

その他の回答 (3)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2006/03/08 05:01 回答No.4

WinIE6ですが、問題なく（＃２のサンプル）表示されます。

質問者

お礼 2006/03/19 14:33

みなさん本当にありがとうございました。うまく表示することができました、またとても勉強になりました。

noname#16352

2006/03/08 00:39 回答No.3

返信を一つ忘れていました(^^; >z-index自体はw3c的に推奨要素なのでしょうか？表示が怪しいので・・・？確か推奨要素だったと思いますよ。むしろ Firefox や Netscape、Mozilla などはかなり W3C の基準等に厳格ですよ。 IE で変になるのは『IE が変だから（独自性が強すぎる＆バグ多し）』という場合が殆どです。

noname#16352

2006/03/08 00:35 回答No.2

試しに以下をコピペして比較してみて下さい。こちらは Mac 環境なので Win IE 6.x での挙動は確認できませんが、 Mac OS X 上では IE、Firefox、Safari、Opera、Camino で問題ありませんでした。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS"> <title>title</title> <style type="text/css">  </style> </head> <body> <div class="p1">くらす１</div> <div class="p2">くらす２</div> <div class="p3">くらす３</div> <div class="p4">くらす４</div> </body> </html> ただ、例外的に -1 指定をした場合 Firefox ではその要素だけ欠如したので、 Win IE にもこういう感じのバグが潜んでいるかもしれません。個人的には IE の表示結果は一切信用していないので、規格に準じている Firefox や Netscape での結果を優先して採用しています。このソースをコピペしたものでは Win IE 6.x で問題なき場合は、 position 属性や他の記述との連携が求められているのかもしれません。ご自身で試された記述との大きな相違点を見いだしてみて下さい。このソースでも問題がみられるようなら Win IE 6.x 固有のバグの可能性もあります。その場合は、独特の対処を求められるかもしれませんが、あいにく当方は林檎派なので具体的な対抗策は存じ上げません…。