WEBサイト作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】

画像の重ね合わせ・重ねる順番指定（z-index）

<html>
<head>
<title>画像の重ね合わせ・重ねる順番指定</title>

<style type="text/css">
<!--
.img1    {
    position:    absolute;
    z-index:    0;
    top:        0px;
    left:        0px;
    border:        2px #f00 solid;
}
.img2    {
    position:    absolute;
    z-index:    2;
    top:        50px;
    left:        150px;
    border:        2px #f00 solid;
}
.img3    {
    position:    absolute;
    z-index:    1;
    top:        100px;
    left:        100px;
    border:        2px #f00 solid;
}
//-->
</style>

</head>
<body>
<img src="../../sample/img/img.jpg" class="img1" alt="画像1">
<img src="../../sample/img/img.jpg" class="img2" alt="画像2">
<img src="../../sample/img/img.jpg" class="img3" alt="画像3">
</body>
</html>

〔実行する〕

スタイルシート(CSS)

●全体の背景色（background-color）	●全体の背景画像（background-image）
●全体の背景画像（固定　background-attachment）	●全体の背景画像（横のみ繰り返し　repeat-x）
●全体の背景画像（縦のみ繰り返し　repeat-y）	●全体の背景画像（位置指定　background-position）
●全体の背景一括指定（background）	●全体の文字色（color）
●リンク色（link, visited, hover, active）	●スクロールバーの色（scrollbar）
●フォント（font-family）	●文字サイズ（font-size）
●文字の太さ（font-weight）	●文字色（color）
●文字装飾（text-decoration）	●斜体（font-style）
●上付き文字・下付き文字（vertical-align）	●大文字変換・小文字変換（text-transform）
●行の高さ（line-height）	●文字間隔（letter-spacing）
●行揃え（text-align）	●１行目にインデント（text-indent）
●段落の１行目を装飾（first-line）	●段落の最初の１文字を装飾（first-letter）
●縦書き（writing-mode）	●自動改行しないで表示（white-space, nowrap）
●文字の背景色（background-color）	●文字の背景画像（background-image）
●枠（border-style）	●枠（太さ指定　border-width）
●枠（色指定　border-color）	●枠（一括指定　border）
●幅・高さ（width, height）	●マージン（外側の間隔　margin）
●パディング（内側の間隔　padding）	●リストスタイル（list-style-type,list-style-image,）
●番号つきリリスト（list-style-type,padding-left）	●画像サイズ（width）
●画像回り込み（float）	●画像にフィルター（透明度　filter, alpha）
●画像に枠（border）	●画像の重ね合わせ・重ねる順番指定（z-index）
●罫線の色・幅・高さ・枠	●フォームの色・サイズ
●IMEの入力モードの指定（ime-mode）	●カーソルの形を指定（cursor）
●ボタン風リンク	●画像ダウンロード対策（右クリックでの画像保存を禁止）

WEBサイト作成【HTML CSS JavaScript PHP CGI Perl Ruby Python .htaccess】