- ベストアンサー
CSS z-indexを使った表示順序の入れ替え
- CSSを勉強中の方がz-indexを使用して表示順序の入れ替えについて質問しています。
- 具体的には背景画像の後ろに文字や画像を表示したいとのことです。
- しかし、うまく重ねることができずに困っているようです。
- kreuz000
- お礼率62% (33/53)
- その他（プログラミング・開発）
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- z-index
z-index あるページの気になる部分だけ切り取ってみました 他のコードで、 <html> <head> <title>aaa</title> <style type="text/css"> div.left { z-index: -100; position: absolute; top: 0px; left: 0px; width: 100px; height: 100%; background: "red"; } div.right { z-index: -100; position: absolute; top: 0px; right: 0px; width: 100px; height: 100%; background: "red"; } </style> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html> z-index:-100; とあるのですが、これはどういう意味ですか。
- ベストアンサー
- HTML
- z-indexを使用した枠の設定について
z-indexを使用して画像の枠を丸くしたいと思い、 参考URL→http://www.htmq.com/style/z-index.shtml を参考にしたのですが出来ません。 div.imageboxで作った角丸の枠を画像の上から重ねて画像を角丸にしたいのですが、どうすれば良いのでしょうか。 ちなみにcssやhtmlで画像を背景画像として扱うという方法は私事情で出来ません。申し訳ありません。この方法ならば簡単にできるのですが・・・ 下はそのソースです。お願いいたします。 <!-- css --> div.imagebox{ //枠の設定 height:150px; width:150px; display: inline-block; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position:relative; z-index:2; }img.imagebox{ //画像のz-index設定 position:relative; z-index:1; } <!-- html --> <div class="imagebox"> <img src="画像" width="150" height="150" border="0" class="imagebox"> </div>
- 締切済み
- HTML
- z-indexについて...
今回添付画像のように画像の上にアイコンを置きたかったのですがうまくいきません。 http://snapkidz.biz/wp/ cssのz-indexを使って熊のアイコンをpngで表示させればうまくいくのかな？と思ったのですが、うまく表示できませんでした。 ソースです。 <div id="header"> <ul class="haeder_bak"> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" /> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_04.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_05.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_06.jpg" /></li> <li><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_07.jpg" /></li> </ul> <div class="header_slider"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_09.jpg" /> </div> <div class="header_bear"> <img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" /> </div> </div> CSSです。 #header{ width:100%; margin-top:15px; position :relative; z-index:0; } #header li{ float:left; } #header ul{ list-style-type:none; } .haeder_bak{ poaition:abosolute; z-index:10; } .header_slider{ poaition:abosolute; z-index:20; } .header_bear{ poaition:abosolute; z-index:30; } どうすれば添付画像のようにいきますか？
- ベストアンサー
- CSS
- css で 「Top へ戻る」 の書き方
h2 で右側に 「Top へ戻る」 を置きたいんですが、 以下のように書いてみると IE6 で背景画像が表示されないのと かなり無駄が多いなと思いまして、なにか良い書き方ご存知でしょうか．．． <style type="text/css"> .h2_container{ background: url(images/bg_h2.jpg); } .title{ width: 500px; float: left; } .top{ width: 100px; float: left; } .clear{ clear: both; } </style> <div id="h2_container"> <div class="title"><h2>内容のタイトル</h2></div> <div class="top"><a href="#">Top へ戻る</a></div> <div class="clear"></div> </div>
- ベストアンサー
- CSS
- IE9のみ、背景が縦に２回表示される
質問よろしくお願い致します。 タイトル通り、IE9でのみ、背景画像が縦に２回連続して表示されてしまいます。 Macの全てのブラウザ、Win Chrome、Safari、Firefox、IE6～8では問題なくきちんと表示されます。 IE9だけなんです。。。 CSSは一部分、直接HTMLに記載していますが、外部CSS（commonで使用している方など）に書いても同じでした。 ソースは下記になります。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <div class="w1000 box_shadow" style="height:645px;background:url(images/bg1.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl1.png" width="800" height="500" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> <div class="w1000 box_shadow" style="height:300px;background:url(images/bg2.jpg) left top no-repeat;"> <div class="w960"> <h3><img src="images/ttl2.png" width="800" height="300" alt="title1" class="p-top25" /><h3> <p class="m-top30"> キャプションキャプションキャプション<br /> キャプションキャプションキャプションキャプションキャプションキャプションキャプション <p> </div> </div> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2つ縦にブロックをおいていますが、１つだけだときちんと表示されます。 背景画像と内包内容違いで複数おくと、この現象がおきます。 position:relativeやzoom:1も試してみましたがダメでした。 具体的な表示内容は、下記のようになります。（わかりずらいの画像も添付します） ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ645pxでbg1.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ645pxでbg1.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 高さ300pxでbg2.jpg背景が表示：内容カラ ーーーーーーーーーーーーーーーーー 高さ300pxでbg2.jpg背景が再度表示：タイトル画像やキャプションが入る ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 原因や改善策などありますでしょうか？ どうぞ宜しくお願い致します。
- 締切済み
- CSS
- ロールオーバーで画像拡大、z-index
下記の様にjavascriptとcssで、 サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。 しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、 うまくいきませんでした。 どのようにすればうまく表示できるか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function setStyle(thum,vType) { document.getElementById(thum).style.visibility = vType; } //--> </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>
- ベストアンサー
- HTML
- CSSでDIVで挟んでいるのに背景色が出ない？
CSSと（X)HTMLでページを作っています。角丸なページにしたいため、 /* ---------- 角丸画像の上辺 ---------- */ #main_contents_header { width: 800px; height:20px; background:url(./top.png) no-repeat top; margin: 10px auto 0px; padding: 0; text-align: center; } /* ---------- 上辺と下辺の間のメイン部分 ---------- */ #main_contents { background:url(./bg.png); width: 800px; margin: 0 auto; padding: 0; text-align: center; } /* ---------- 角丸画像の下辺 ---------- */ #main_contents_bottom { width: 800px; height:20px; background:url(./bottom.png) no-repeat top; margin: 0 auto; padding: 0; text-align: center; } というCSSを作り、 HTMLは <div id="main_contents_top"></div> <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> <div id="main_contents_bottom"></div> という書き方にしているのですが、<div id="main_contents">の背景画像が正しく出ず、地の色が見えてしまうのです。試しに<div id="main_contents">へpadding-bottom:300pxというような指定を加えると、正しく背景画像が出ました。 <div id="main_contents"> ここにいろいろなコンテンツを置いていく </div> という書き方ではダメなのでしょうか・・・？ 確認はFirefoxとSafariでやっています。
- ベストアンサー
- HTML
- CSSを動的出力部分で対応させたい
以下のようなソースで、動的に出力されるコンテンツのレイアウトに対応したいと思っています。 "Cat_StyleP_img_1"、"name_"、"comment_"のクラス指定したDIVエリアは動的に出力される部分です。 --CSS-- div.mainframe_ { float: right; display: inline; overflow: hidden; } div.container_ div.contents_, div.container_ div.mainframe_ { width: 700px; } div.CategoryStyleP_ { width:100%; overflow: hidden; padding-bottom: 20px; } div.CategoryStyleP_Line_ { width: 102%; overflow: hidden; padding: 10px 0 10px 10px; margin-bottom: 10px; } div.CategoryStyleP_Item_ { float: left; display: inline; width: 340px; margin-right: 10px; padding: 10px 0; overflow: hidden; background: #fff; } div.CategoryStyleP_Item_ .Cat_StyleP_img_ { float: left; display: inline; width: 140px; } div.CategoryStyleP_Item_ .Cat_StyleP_main_ { float: left; display: inline; width: 180px; padding-right: 10px; } div.CategoryStyleP_Item_ h3.name_ { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #cfcfcf; font-size: 14px; font-weight: bold; } div.CategoryStyleP_Item_ div.comment_ img { margin: 0 0 10px 0; } --html-- <body > <div class="container_"> <div class="contents_"> <div class="mainframe_"> <div class="CategoryStyleP_"> <div class="CategoryStyleP_Line_ heightLineParent"> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像1"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルA</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 </div> </div> </div> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像2"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルB</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 コメント、コメント。</div> <span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span></div> </div> </div> </div> </div> </div> </div> </body> このレイアウトで出力する画像が無かった場合、"Cat_StyleP_img_1"のDIV自体が出力されない 仕様なのですが、画像の出力がない場合に、その他2つ（"name_"、"comment_"）の要素を横に広げて、 画像の出力が無かった場合の空きスペースが埋まるようにしたいのですが、何か良い方法はありませんでしょうか？ JavaScriptではなくCSSで何とか対応したいと考えています。 お助け下さい、何卒宜しくお願いします。
- 締切済み
- CSS
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100 height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。 テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-top" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-cate" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ ｜ ｜ ｜ ｜ ｜ ｜DIV ｜ DIV ｜ ｜id="index"｜ id="main" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="footer" ｜ －－－－－－－－－－－－－－－－－－－－－－ 上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> ・ ・ ・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS
