CSSのz-indexについて教えてください。

お世話になります。

wrapperクラスの内の左側にsideクラスがあり、右側にcontentsクラスがあるレイアウトで作成しております。
デザインの都合上、sideクラスにはz-index:1を指定し、contentsクラスにはz-index:-1と指定しております。
ただ、下記の記述ではcontentsクラス内になるclickのリンクが動作せずに困っております。
z-indexの指定は変えずにリンクを動作させる方法はありますか？

sideクラスをz-index:2に変更し、contentsクラスをz-index:1に変更すれば、リンクが動作しますが、contentsクラスのz-index:-1は変えずにリンクを動作させたいです。

ご存知の方いれば、ご教示くださいm(__)m

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>テスト</title>
6<style type="text/css">
7
8* { margin:0; padding:0; }
9
10html, body {
11	width:100%;
12	height:100%;
13}
14
15.wrapper {
16	width:100%;
17	height:100%;
18	display:flex;
19}
20
21.side {
22	width:20%;
23	height:100%;
24	z-index:1;
25	background:#3b738c;
26}
27
28.contents {
29	width:80%;
30	height:100%;
31	z-index:-1;
32	background:#e8606a;
33}
34
35</style>
36</head>
37
38<body>
39
40<div class="wrapper">
41
42	<div class="side">
43		side
44	</div>
45
46	<div class="contents">
47		<a href="#">click</a>
48	</div>
49
50</div>
51
52</body>
53</html>
54

行動規範の内容に同意します

回答1件

ベストアンサー

ご提示頂いたコードのz-indexが「-1」「1」で効かなくて、「1」「2」で効くのは、負の値を指定できないからかと思います。

z-indexはpositionを指定して重ねている場合に重なり順を指定するプロパティです。
このレイアウトの場合そもそも必要ないと思いますがいかがでしょうか？

投稿2015/11/26 04:45

rossi46hiro

総合スコア992

退会済みユーザー

2015/11/26 05:06

回答ありがとうございます。記述したコードは、実際にコーディングしている記述ではなくて、現象を再現した簡素な記述になっております。実際にデザイン・コーディングしているものはもっと複雑なレイアウトです。説明不足で申し訳ございませんm(__)m z-indexとpostionについての理解が足りないので、もう少し調べてみます(^^)

rossi46hiro

2015/11/26 05:29

なるほど、そういうことでしたか。もし調べても分からないようでしたら、もっと具体的なHTMLなりを見せてもらえれば回答できるかもしれません。

退会済みユーザー

2015/11/26 05:38

すいません、解決しました。こちらの「http://no1026.com/archives/104」を参考にz-indexとpositionの関係について確認しました。 z-indexの値は整数値で指定するため、負の値も指定可能みたいですが、質問に記載した通り、負の値を指定するとリンクの動作がしないため、負の値を指定しなくても問題ないように根本的にレイアウト自体のCSSを見直しました。お陰様で解決できました。回答ありがとうございましたm(__)m

行動規範の内容に同意します