- 締切済み
画像の上にテキストを重ねるためにＣＳＳスタイルシートをつくったのですが
Ｄｒｅａｍweaver8にてＨＰをつくっております。 よく背景でない画像の上にテキストがかさなってあるのを見て それに挑戦しているのですが、 下記がＣＳＳのソースです。外部ファイル化しています。 .kasaneru {z-index: 2;} .kasaneru2 { z-index: 1; height: auto; width: auto; top: 300px; right: 120px; overflow: visible; position: absolute; } これをdivやclassでbody内に指定してみたのですが、画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません。 私の希望は画像の上にテキストを重ねたいのです。 z-indexで数字を大きくしているのにテキストが上にきてくれないのはなぜなのでしょうか？ よろしくお願いいたします。ｍ（_ _）ｍ
- torananoda
- お礼率48% (410/838)
- HTML
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは #3です。昨日は回答をお休みしていたので返事が遅くなりましたが・・・ 変ですね？ソースを載せる際にはIE6,Firefox2,Opera9で確認してから送るようにしているのですが・・・再確認してみましたが真ん中のちょっと下あたりに配置しているようですが（－－；） 外部CSS『test.css』 .downimg { position:absolute; top:300px; left:300px; z-index:1; width:500px; height:500px; } .uptext { position:absolute; top:500px; left:500px; z-index:2; } 表示HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">" <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="imagetoolbar" content="no"> <link rel="stylesheet" href="./test.css" type="text/css"> <!--↑外部CSSのパスは相対パスか絶対パスで環境に合わせて変更してください↑--> </head><body> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> </body></html> 外部化希望のようなのでそちらにしてみましたがこれをコピペするなりして試してもらえますか？（コピペした場合にはアドレスの前後に余分なもの『？』がつきますので削除してください） 色々やってみたのですがその症状が確認できたのは外部CSSが効いてなかったり記述ミスしていたときに確認できました スタイルシートにはブラウザ固有のものや解釈違いのものも若干ありますが大抵同じような表示にできるはずなのでドリウィはOKで他のはNGということはあまりないとは思うのですが・・・ 上ので確認（真ん中下あたりに配置）できたのであればその左に寄ったものと比較してみてもらえますか？分からなければ（差し支えなければ）そのソースを載せてみてもらえますか？まったく予想がつかないので気になりますので・・・ ※他の2つの場合のソースも同じような記述で確認できます（配置は1つ目が左上、2つ目が300pxの空白ボックスの下に左配置になります） う～～む また長くなってしまった・・・（＞＜）
- goldfox
- ベストアンサー率49% (123/249)
> どのブラウザで見てもきちんとした位置にくるようにするにはどうすればよいでしょうか？ No.2 の回答では気に入らなかったでしょうか。 分かりやすい重ね方だと思ったのですが。 画像の位置を調節したければ、div（.kasane）に余白指定をします。 .kasane {position: relative; margin-top:50px; margin-left:50px;} 文章は親要素（この場合class="kasane"）に対する絶対位置指定していますので、divに合わせて文章も移動します。 普通、重ねは後に書いたものが上に乗ります。z-indexを使えば先に書いたものを上に乗せることができます。 上に乗せていく順にソースを書いていれば、特に必要としないプロパティです。
お礼
すいませんZに執着してしまいまして（’’；） NO2の方が確かにわかりやすいですね。 あらためてNO2の方でやってみたいと思います。
補足
たしかにＮＯ２のが一番カンタンですね（’’；） やってみましたがスムーズにできました！ ありがとうございました！
- Questa
- ベストアンサー率48% (13/27)
ANo.5 です。CSS の注釈に誤りがありました。 .txt-top の 「margin-bottom: -1em; /* 1 行下ろす */」は 位置調整用ではなく、後続余白を調整するためのものでした。 訂正いたします。
- Questa
- ベストアンサー率48% (13/27)
マージン等にマイナスの値を指定する方法もあります。ただし残念なことに、テキストは 1 行限定です。 (HTML) <div class="img-top"><img src="画像" alt="" /></div> <div class="txt-top">画像とテキストの上端を合わせる</div> <div class="img-mid"><img src="画像" alt="" /></div> <div class="txt-mid">画像とテキストのセンターを合わせる</div> <div class="img-bot"><img src="画像" alt="" /></div> <div class="txt-bot">画像とテキストの下端を合わせる</div> (CSS) .img-top { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ } .txt-top { position: relative; top: -64px; /* 画像の高さ分、上に移動 */ margin-bottom: -1em; /* 1 行下ろす */ } .img-mid { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ margin-bottom: -64px; /* テキスト開始位置を上端に移動 */ } .txt-mid { line-height: 64px; /* 画像の高さと同じ */ } .img-bot { margin-top: 1em; /* 上余白 */ height: 64px; /* 画像の高さ */ margin-bottom: -1em; /* テキスト開始位置を 1 行分上に移動 */ } .txt-bot { line-height: 1; }
- k0021
- ベストアンサー率26% (32/120)
わたし場合の作成例 <table background="../pot1/ryu03.jpg"> <tr><th style="font:41px/100% cursive,serif;"><b>龍爪山<br>の歴史</b></th></table> 間違えいたらゴメンネ <b>は、style="font-weight:bold;" 替えてね
- leap_day
- ベストアンサー率60% (338/561)
こんにちは position:absolute;を使用しているのであれば浮き上がった状態で表示されるので特にz-indexを使用しなくても画像の上に配置できると思うのですが・・・ ＞画像はテキストの上に重なるのですが、肝心のテキストが上にでてくれません 画像の方にposition:absolute;を使用しているのでしょうか？ テキストを上にしたいのであればテキストの方にposition:absolute;を使用するようになります <style type="text/css"><!-- .downimg { width:500px; height:500px; } .uptext { position:absolute; top:100px; left:100px; } --></style> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> で、レイアウト上途中でこういうことがしたい場合にはposition:relative;を使用してposition位置の開始点を決めてやります <style type="text/css"><!-- #container { position:relative; } .downimg { width:500px; height:500px; } .uptext { position:absolute; top:100px; left:100px; } --></style> <div style="width:300px;height:300px;"> </div> <div id="container"> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> </div> ※レイアウト上floatなどを使用したりした場合にはrelativeの開始点が異なることがあります z-indexを使用するときは画像、テキスト両方をposition指定したときに使用します <style type="text/css"><!-- .downimg { position:absolute; top:300px; left:300px; z-index:1; width:500px; height:500px; } .uptext { position:absolute; top:500px; left:500px; z-index:2; } --></style> <img src="***.gif" alt="背景" class="downimg"> <div class="uptext"> absoluteしたほうが上にきます </div> 何か長々とすみません ｍ（－－）ｍ
お礼
大変ご丁寧なご説明ありがとうございます。 Ｚ－ｉｎｄｅｘの方でやってみたのですが、Ｆｉｒｅｆｏｘ、ＩＥブラウザで表示するとテキストと画像が左に寄ってしまっていてだめです。Ｄｒｅａｍｗｅａｖｅｒでデザインしている内はきちんとした位置にあります。 どのブラウザで見てもきちんとした位置にくるようにするにはどうすればよいでしょうか？
- goldfox
- ベストアンサー率49% (123/249)
html部分も提示してほしいですが、 z-index: は position プロパティで relative、absolute、fixed を指定している場合に有効だそうです。 http://www.tagindex.com/stylesheet/box/z-index.html .kasaneru { z-index: 2; position: relative;} まあ、z-indexなくてもできますけど。 .kasane {position: relative;} .kasanetext {position: absolute; top:; left:; width:;} <div class="kasane"> <img src="" alt=""> <p class="kasanetext">文章。top:上からの位置; left:左からの位置; width:横幅;で位置を整える。</p> </div>
- benelli
- ベストアンサー率51% (78/152)
CSSの仕様上、z-indexプロパティは「位置決め要素」（どこに表示させたのか明示された要素）以外には適用されません。 DIV要素や画像などのように表示位置を特定できる要素なら適用されますが、BODYなど表示位置などが明確でない要素には適用されません。 ブラウザによって仕様に定められていない以上の機能を有したり、仕様の解釈が異なったりしますので必ずとはいえませんが、ほとんどのブラウザはBODY要素にz-indexを指定しても無効だと考えてください。 スタイル指定は指定先がブロック要素なのかインライン要素かなど、種類によって適用範囲が異なるので気をつけてもらえればと思います。
お礼
ご丁寧にどうもありがとうございます。 なぜかはじめからやったらきちんと表示されるようになりました。 ありがとうございました！