
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">よりも前面に表示させたいのですが
スタイルシートで実現可能なのでしょうか。
いろいろ調べながらやってみましたが
解決できなかったので知恵をお貸し頂ければと思い
投稿させて頂きました。
よろしくお願い致します。
No.5ベストアンサー
- 回答日時:
何度も失礼します。
変ですね、わたしの作ったデータではちゃんと動いていますけど。。。。
IE7~9,firefox,Chromeで確認したけど問題ないようです。
動かないのはどのブラウザで試してのことなのかも、書くとアドバイスがつきやすいと思いますよ。
念のためcss以外も書いておきます。
------------------------------
<!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>
-------------------------------
出来ました~!!\(^-^)/
ありがとうございます。とても助かりました&勉強になりました。
親身に何度も教えて頂いてありがとうございました~!!!!
No.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の使い方でどうにかできないかと
また試行錯誤してみたいと思います。
度々恐れ入りますが他にアイディアあればよろしくお願い致します。
No.3
- 回答日時:
改めて質問文を読み返してみたのですが、読めば読むほど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>
No.2
- 回答日時:
普通に書けば下に記述した要素ほど見かけ上は上に来るので、先に書いた.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は入りきらない部分をスクロールで表示させる
というもなのに、入りきらない一部だけを前面に表示させたいという
矛盾した内容にはなっているので出来ないんじゃないかと思い始めてきました・・・。
他にアイディアあればよろしくお願い致します。
No.1
- 回答日時:
ありがとうございます。
z-indexはこれをきっかけにやってみましたが、
どうも上手くいきませんでした。
やり方でしょうか・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssで文字サイズ指定、ptでもpx...
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
クロームとサファリでスクロー...
-
<div>と<div>の間の10px程の...
-
css初心者 フレックスボックス...
-
CSSで3分割した背景画像を配置...
-
テーブル内の画像をマウスオー...
-
モーダルダイアログでのボタン...
-
safariでの横並びリスト(List...
-
入力フォームとセレクトボック...
-
CSS(0の単位)について
-
CSS検証サービス
-
CSSで背景色を下まで表示させたい
-
ドロップダウンメニューが隠れ...
-
<li>タグの数が増えすぎたので...
-
divタグ内のコンテンツが重なっ...
-
複数のボタンを等間隔に、かつ...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
余分な縦スクロールバーが出て...
-
CSSがなぜかfont-sizeだけ効か...
-
<div>と<div>の間の10px程の...
-
htmlでheightが自動で延長
-
画像リンクの下に文字を付けた...
-
ネガティブマージン
-
table周辺の隙間をなくしたい。
-
入力フォームとセレクトボック...
-
定義リストに下線をつけたいと...
-
ライトボックスでスクロールバー
-
footer を横幅いっぱいに広げる...
-
CSSについて。このサイトの背景...
-
テーブルのセル間に余白が空い...
-
XHTML+CSS で、ブラウザごとに...
おすすめ情報