こんにちは、「就労継続支援事業所A型 BRANCH FOR PRO」の中の人です。

今回は、CSSで指定できる「z-index」について、簡単にご紹介しようと思います。

想定読者は、「HTML5」と「CSS3」について、書かれているコードが読める方です。

z-indexのはたらき

先ず「z-index」属性の働きですが、これは「要素が重なった場合に表に見える順番を変更するための指定」です。

通常「position」属性で表示を重ね合わせた場合、書かれた順番に表に出てきます(最初に書かれた要素が一番下に来て、順々に表に出てきます)。

「z-index」の指定が無いサンプルをコードで説明しましょう。

最初に、HTMLファイル「index.html」のコードを次のように書きます。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style-normal.css">
		<!-- <link rel="stylesheet" href="css/style-zindex.css"> -->
		<title>z-indexのデモ</title>
	</head>
	<body>
		
<div id="wrapper">
			<a id="no1" class="inner">最初に現れる要素です</a>
			<a id="no2" class="inner">2番目に現れる要素です</a>
			<a id="no3" class="inner">3番目に現れる要素です</a>
		</div>

	</body>
<html>

要素内で、「z-index」を指定していないCSSファイルを読み込んでいます。

このCSSファイル「style-normal.css」の内容は、次の通りです。

#wrapper {
	position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 20px;
}

.inner {
	font-size: 30px;
}

#no1 {
	background-color: #99ff99;
	position: absolute;
	top: 60px;
	left: 15px;
}

#no2 {
	background-color: #3300ff;
	position: absolute;
	top: 65px;
	left: 30px;
}

#no3 {
	background-color: #660033;
	position: absolute;
	top: 70px;
	left: 45px;
}

このCSSファイルでは、「z-index」属性を書いていませんので、最後に書かれた要素が一番上に来ています。表示は次のようになります。

見てお分かりの通り、最後に書かれている「3番目に現れる要素です」が一番上に見えます。

では次に、「z-index」を指定してみましょう。「index.html」内の要素内で、「z-index」を指定したCSSファイルを読み込みます。

<head>
		<meta charset="UTF-8">
		<!-- <link rel="stylesheet" href="css/style-normal.css"> -->
		<link rel="stylesheet" href="css/style-zindex.css">
		<title>z-indexのデモ</title>
</head>

ここで読み込まれるCSSはファイル「style-ziindex.css」の内容は、次の通りです。

#wrapper {
	position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 20px;
}

.inner {
	font-size: 30px;
}

#no1 {
	background-color: #99ff99;
	position: absolute;
	top: 60px;
	left: 15px;
	z-index: 3;
}

#no2 {
	background-color: #3300ff;
	position: absolute;
	top: 65px;
	left: 30px;
	z-index: 2;
}

#no3 {
	background-color: #660033;
	position: absolute;
	top: 70px;
	left: 45px;
	z-index: 1;
}

見てお分かりのように、「z-index」属性を追加しただけです。

注意していただきたいのは、最初の要素に「3」、次の要素に「2」、最後の要素に「1」を指定しています。

「z-index」指定は、数字が大きいほど手前に表示されるようになりますので、先ほどとは逆に、最初の要素が一番が一番手前に表示される筈ですね?

その通りになりました!

この表示結果は、次の通りになります。

注意すること

さて、この「z-inidex」属性の使い方ですが、若干注意しなければなりません。

何かといえば、「要素のposition属性が『static(指定しない場合の初期値)』では、有効にならない」ことです。

必ず「position」属性を指定し、かつ、その指定が「static」以外でなければなりません。

ここは結構はまりますので注意です。

JavaScriptとのタッグで真価を発揮!

さて、単に「順序を変えるだけならその順番通りにHTML書けばいいじゃん!」と思ったあなた、なかなか鋭いです!

このCSS属性は、JavaScriptで操作することで真価を発揮します。

例えば「タブメニュー」なんかがそうです。

「JavaScriptで動的に重なりを変更する」というのが、このCSS属性の真骨頂です。

このサンプルは、機会があればまたご紹介します。

では、これにて「z-index」の簡単な説明を終わらせていただきます。

記事を読んでいただきありがとうございます!