- ベストアンサー
z-indexとは？
- z-indexは要素の重なり順を指定するCSSプロパティです。
- 値が負の場合、要素は後ろに配置されます。
- この場合、div.leftとdiv.rightは背景として表示されるため、画面には見えません。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
z軸座標です。stacking context 示されたソースは、多分知らない人がどこかを真似して書いたもの？通常-100なんてないだろう。 下記はサンプル(HTML4.01 Strict) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み ★下記HTMLは、視認性のため、タブを全角スペース２個で置換してある。元のタブに戻してテストすること。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- html,body{padding:0px;margin:0px;} h1{color:white;} body{ background-color:black;} p{z-index:1; background-color:red;position:absolute;width:400px; height:300px;top:100px;left:100px; font-size: 2em; } p+p{z-index:3; background-color:blue; top:200px;left:150px; } p+p+p{z-index:2; background-color:green; top:150px;left:200px; } p+p+p+p{z-index:-1; background-color:yellow; top:50px;left:250px; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1><a name="top">サンプル</a></h1> <p>・・１(red)stack level=1・・</p> <p>・・２(blue)stack level=3・・</p> <p>・・３(green)stack level=2・・</p> <p>・・４(yellow)stack level=-1・・</p> </body> </html>
お礼
詳しい解説ありがとうございました。 少しずつ勉強続けていくつもりなので、またよろしくお願いします。