CSSで「overflow:scroll」をしてい

解決済

質問者：goo-id
質問日時：2013/02/18 18:27
回答数：5件

CSSで「overflow:scroll」をしているボックス内で表示している
特定のボックスを最前面に表示させることは
可能なのでしょうか。

文字では説明しにくいので
例として
-------------
<STYLE type="text/css">
.box1{
overflow: scroll;
width: 200px;
height: 100px;
}
.box2{
width: 200px;
height: 40px;
background-color: yellow;
position: relative
}
.box3{
width: 200px;
height: 40px;
background-color: pink;
position: relative; left: 100px; top: -10px
}

</STYLE>
<div class="box1">
<div class="box2">Box No.2</div>
<div class="box3">Box No.3</div>
</div>
-------------

だとして、
<div class="box3">Box No.3</div>を
<div class="box1">よりも前面に表示させたいのですが
スタイルシートで実現可能なのでしょうか。

いろいろ調べながらやってみましたが
解決できなかったので知恵をお貸し頂ければと思い
投稿させて頂きました。

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

No.5ベストアンサー

回答者： wo_moon
回答日時：2013/02/22 01:09

何度も失礼します。

変ですね、わたしの作ったデータではちゃんと動いていますけど。。。。
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">

</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>

-------------------------------

- 0
- 件

通報する

この回答へのお礼

出来ました～！！＼（＾－＾）／

ありがとうございます。とても助かりました＆勉強になりました。

親身に何度も教えて頂いてありがとうございました～！！！！

通報する

お礼日時：2013/02/22 15:48

No.4

回答者： wo_moon
回答日時：2013/02/21 12:02

なるほど。

じゃあやはり、最初に書かれていた質問文の内容は、ちょっとピントがあってないですね。

補足で書かれた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;
}

に差し替えてみてください。
意味不明のコードは削除してあります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
最初の質問内容ではまずかったのですね。申し訳ないです。

今回ご回答頂きましたスタイルシートへ
差し替えてみましたが、上手くいきませんでした…。

positionや.box1 ulの使い方でどうにかできないかと
また試行錯誤してみたいと思います。

度々恐れ入りますが他にアイディアあればよろしくお願い致します。

通報する

お礼日時：2013/02/21 19:58

No.3

回答者： wo_moon
回答日時：2013/02/20 17:30

改めて質問文を読み返してみたのですが、読めば読むほどgoo-idさんが、何をどうしたいかがわからなくなってきました。

（^^;）

コードから推測するに、添付画像のような感じでしょうか？

Box No.3がBox No.1の左上にかかるように固定されている感じ？
これだとスクロールバーがかくれちゃいますけど。。。

何をどのようにしたいのか、図も交えて教えてもらえたらと思います。

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございます。

添付されております画像のように前面に表示させたいです！

全部のっけると余計にややこしくなるんじゃないかと思って
「overflow: scroll」をしているボックスより前面に表示させたいと
質問いたしましたが、より詳しくやりたい事を書きますと下記のようなソースなります。

テキストにマウスをのっけると画像が表示されるのですが、
box1内の表示となってしまい、ボックスを大きくするか
画像を小さくしないと画像全部が見れませんでした。
それでbox1の大きさにかかわらず画像を最前面に
表示させることができれば良いなと思っておりました。
下記のようになるとまた状況が変わりますでしょうか・・・。

中途半端な知識しかなくて、まだおかしなところがあるかもしれませんが、
もしお分かりになれば教えていただけると助かります。

よろしくお願い致します。

------------------------------
<STYLE type="text/css">

</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>

通報する

お礼日時：2013/02/20 20:01

No.2

回答者： wo_moon
回答日時：2013/02/19 16:05

普通に書けば下に記述した要素ほど見かけ上は上に来るので、先に書いた.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; (相対配置）を指定します。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
positionの使い方が良くわかっていなく、今回ご指摘頂きわかってきたような
気がします。
positionを修正し、z-indexも組み合わせてみましたが出来ませんでした。

そもそもoverflow:scrollは入りきらない部分をスクロールで表示させる
というもなのに、入りきらない一部だけを前面に表示させたいという
矛盾した内容にはなっているので出来ないんじゃないかと思い始めてきました・・・。

他にアイディアあればよろしくお願い致します。

通報する

お礼日時：2013/02/20 09:49