ホーム＞HTMLリファレンス（アルファベット検索）＞z-indexプロパティ
z-index プロパティ …要素を重ねる順番を指定する
使用プロパティ
 |
z-index: 値; |
対象となる
要素 |
position プロパティを指定した要素 |
継承 |
しない
|
値 |
整数、auto （初期値）
|
 |
      |
 解説
 z-index プロパティを使えば、position プロパティで重なった要素の重なる順番を指定することができます。値には整数や「auto」を指定し、整数を指定した場合は数が大きいほど前面に表示され、「auto」を指定した場合は通常の順番で表示されます。ただし、position プロパティに「static」以外の値が指定されている要素にのみ有効です。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
h2 {
position: relative;
border: 2px solid skyblue;
background-color: lightcyan;
z-index: 1;
margin: 0 2em;
padding: 0.5em;
}
p.sample {
position: relative;
top: -1em;
border: 2px solid lightgrey;
background-color: gainsboro;
padding: 1em 0.5em;
}
</style>
</head>
<!--ページの本文-->
<body>
<h2>上に表示されます</h2>
<p class="sample">下に表示されます</p>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
上に表示されます
下に表示されます
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
