- ベストアンサー
CSSで「overflow:scroll」を使用しているボックス内で特定のボックスを最前面に表示する方法はあるか
- CSSで「overflow:scroll」を使用しているボックス内で特定のボックスを最前面に表示する方法について調査しましたが、解決策は見つかりませんでした。
- 「overflow:scroll」を使用しているボックス内で特定のボックスを最前面に表示させる方法がCSSで実現可能かどうかについて調査しましたが、解決策は見つかりませんでした。
- 特定のボックスを「overflow:scroll」を使用しているボックス内で最前面に表示させる方法について調査しましたが、CSSでの解決策は見つかりませんでした。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
何度も失礼します。 変ですね、わたしの作ったデータではちゃんと動いていますけど。。。。 IE7～9,firefox,Chromeで確認したけど問題ないようです。 動かないのはどのブラウザで試してのことなのかも、書くとアドバイスがつきやすいと思いますよ。 念のためｃｓｓ以外も書いておきます。 ------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無題ドキュメント</title><style type="text/css"> <!-- .box1 { position: relative; } .box1 ul{ overflow: scroll; width: 600px; height: 100px; font-size: 80%; margin:0px; padding:0px; text-align:left; border:1px solid #000000; } .thumbnail span{ position: absolute; top: 0; left: -1000px; width:300px; height:200px; } .thumbnail:hover span{ left: 300px; } .thumbnail span img{ border:none; } --> </style> </head> <body> <div class="box1"> <ul> <li><a class="thumbnail" href="">あいうえおあいうえおあいうえおあいうえおあいうえお<span><img src="test_01.jpg" width="300" height="200"></span></a></li> <li><a class="thumbnail" href="">かきくけこかきくけこかきくけこかきくけこかきくけこ<span><img src="test_02.jpg" width="300" height="200"></span></a></li> <li><a class="thumbnail" href="">さしすせそさしすせそさしすせそさしすせそさしすせそ<span><img src="test_03.jpg" width="300" height="200"></span></a></li> </ul> </div> </body> </html> -------------------------------
その他の回答 (4)
なるほど。 じゃあやはり、最初に書かれていた質問文の内容は、ちょっとピントがあってないですね。 補足で書かれたcssも、試行錯誤のあとが見て取れますね。 positionの指定は「何を」「どこを基準に」「どの位置に」「どう位置指定するか」が整理されてないといけません。 むやみと指定するとレイアウトそのものが崩れます。 今回の場合は「どこを基準に」→.box1、「何を」→.thumbnail spanが正しく指定されていませんね。 スタイルシートを .box1 { position: relative; } .box1 ul{ overflow: scroll; width: 600px; height: 100px; font-size: 80%; margin:0px; padding:0px; text-align:left; border:1px solid #000000; } .thumbnail span{ position: absolute; top: 0; left: -1000px; padding: 5px; width:300px; height:200px; } .thumbnail:hover span{ left: 300px; } .thumbnail span img{ border:none; } に差し替えてみてください。 意味不明のコードは削除してあります。
お礼
ありがとうございます。 最初の質問内容ではまずかったのですね。申し訳ないです。 今回ご回答頂きましたスタイルシートへ 差し替えてみましたが、上手くいきませんでした…。 positionや.box1 ulの使い方でどうにかできないかと また試行錯誤してみたいと思います。 度々恐れ入りますが他にアイディアあればよろしくお願い致します。
改めて質問文を読み返してみたのですが、読めば読むほどgoo-idさんが、何をどうしたいかがわからなくなってきました。（^^;） コードから推測するに、添付画像のような感じでしょうか？ Box No.3がBox No.1の左上にかかるように固定されている感じ？ これだとスクロールバーがかくれちゃいますけど。。。 何をどのようにしたいのか、図も交えて教えてもらえたらと思います。
お礼
ご丁寧にありがとうございます。 添付されております画像のように前面に表示させたいです！ 全部のっけると余計にややこしくなるんじゃないかと思って 「overflow: scroll」をしているボックスより前面に表示させたいと 質問いたしましたが、より詳しくやりたい事を書きますと下記のようなソースなります。 テキストにマウスをのっけると画像が表示されるのですが、 box1内の表示となってしまい、ボックスを大きくするか 画像を小さくしないと画像全部が見れませんでした。 それでbox1の大きさにかかわらず画像を最前面に 表示させることができれば良いなと思っておりました。 下記のようになるとまた状況が変わりますでしょうか・・・。 中途半端な知識しかなくて、まだおかしなところがあるかもしれませんが、 もしお分かりになれば教えていただけると助かります。 よろしくお願い致します。 ------------------------------ <STYLE type="text/css"> <!-- .box1 { overflow: scroll; width: 600px; height: 100px; border:1px solid #000000; } ul{ font-size: 80%; margin:0px; padding:0px; text-align:left; } .thumbnail{ position: relative; } .thumbnail span{ position: absolute; padding: 5px; left: -1000px; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; width:300px; height:200px; } .thumbnail:hover span{ visibility: visible; top: 0; left: 300px; } --> </STYLE> <div class="box1"> <ul> <li><a class="thumbnail" href="">あいうえおあいうえおあいうえおあいうえおあいうえお<span><img src=""></span></a></li> <li><a class="thumbnail" href="">かきくけこかきくけこかきくけこかきくけこかきくけこ<span><img src=""></span></a></li> <li><a class="thumbnail" href="">さしすせそさしすせそさしすせそさしすせそさしすせそ<span><img src=""></span></a></li> </ul> </div>
普通に書けば下に記述した要素ほど見かけ上は上に来るので、先に書いた.box1よりも.box3が上に来るはずです。 .box3{ position: relative; left: 100px; top: -10px } とありますが、ここが疑問です。 position: relativeなのに位置指定は矛盾していませんか？ もしや .box1{ position: relative; } .box3{ position: absolute; left: 100px; top: -10px; } の間違いでは？ 絶対で配置したい要素が.box3の場合、その親要素（.box1）にposition: relative; (相対配置）を指定します。
お礼
ありがとうございます。 positionの使い方が良くわかっていなく、今回ご指摘頂きわかってきたような 気がします。 positionを修正し、z-indexも組み合わせてみましたが出来ませんでした。 そもそもoverflow:scrollは入りきらない部分をスクロールで表示させる というもなのに、入りきらない一部だけを前面に表示させたいという 矛盾した内容にはなっているので出来ないんじゃないかと思い始めてきました・・・。 他にアイディアあればよろしくお願い致します。
- muuming2001
- ベストアンサー率23% (202/847)
流し読みでしか質問を見てません事をおゆるしくだされ。 http://www.htmq.com/style/z-index.shtml ↑ このへんに答えがありそう？
お礼
ありがとうございます。 z-indexはこれをきっかけにやってみましたが、 どうも上手くいきませんでした。 やり方でしょうか・・・。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
出来ました～！！＼（＾－＾）／ ありがとうございます。とても助かりました＆勉強になりました。 親身に何度も教えて頂いてありがとうございました～！！！！