z-index

解決済

質問者：saori222
質問日時：2010/02/16 14:38
回答数：1件

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;
とあるのですが、これはどういう意味ですか。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2010/02/16 15:19

z軸座標です。

stacking context
　示されたソースは、多分知らない人がどこかを真似して書いたもの？通常-100なんてないだろう。

下記はサンプル(HTML4.01 Strict)
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
★下記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">

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