| ポイント |
<![CDATA[
.p1 { position:absolute; left:50px; top:50px;
z-index:10;
background-color:orange; }
.p2 { position:absolute; left:80px; top:60px;
z-index:20;
background-color:yellow; }
]]>
|
| 説 明 |
段落の重なり順を指定するにはz-indexでZ座標を指定します。Z座標は手前にくるほど大きくなります。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>段落の重なり順を指定する</title>
<style type="text/css"><!--
.p1 { position:absolute; left:50px; top:50px;
z-index:10;
background-color:orange; }
.p2 { position:absolute; left:80px; top:60px;
z-index:20;
background-color:yellow; }
--></style>
</head>
<body>
<p class="p1">■の段落は下に<br>表示されます。</p>
<p class="p2">■の段落は上に<br>表示されます。</p>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
段落の重なり順を指定する