z-index: -1; の背景画面について

質問内容

html初心者です。
現在、cssのposition/z-index辺りを学習しております。
演習を行いながらコードを書いているのですが、z-indexの優先度について疑問があります。
z-indexを付与していない状態で&:hoverすると&.slide-bg{& span{}}が最前面に来てしまう為、
z-index: -1;を付与し、&slide-bgにz-index: 1;も付与する事で背面に移動する事は理解し期待通りの動作をする事は確認しました。
z-index: -1;をz-index: 1;に変更し、z-index: 1;をz-index: 2;に変更しても同じ挙動になると思ったのですが、
&.slide-bg{& span{}}が前面に来ており、color: white;が有効になりません。
そちらの理由を教えていただけないでしょうか？

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div id="container">
12        <button class="btn slide-bg"><span></span>Button</button>
13    </div>
14</body>
15</html>

scss
1$cWhite: #fff;
2$cBlack: #000;
3
4#container {
5  text-align: center;
6}
7
8.btn {
9  background-color: $cWhite;
10  color: $cBlack;
11  border: 1px solid $cBlack;
12  padding: 10px 40px;
13  margin: 50px 0;
14  font-weight: 600;
15  cursor: pointer;
16  transition: all 0.3s;
17
18  &.slide-bg {
19    position: relative;
20    overflow: hidden;
21    z-index: 1;
22
23    & span {
24      display: inline-block;
25      width: 100%;
26      height: 100%;
27      position: absolute;
28      background-color: $cBlack;
29      top: 0;
30      left: 0;
31      transform: translateX(-100%);
32      transition: transform 0.3s;
33      z-index: -1;
34    }
35
36    &:hover {
37      color: $cWhite;
38
39      & span {
40      transform: none;
41      }
42    }
43  }
44}

okina

2020/05/07 15:34

Buttonという文字をhoverで白にしたいのですか？

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

回答1件

ベストアンサー

Positionが指定されていない要素は、Positionが指定されている要素の下にきます(z-indexにかかわらず）。というか、position:staticな要素にz-indexは指定できません。
そのため、"Button"という文字列にpositionを指定します。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    <div id="container">
12        <button class="btn slide-bg"><span></span>Button</button>
13    </div>
14</body>
15</html>

SCSS
1$cWhite: #fff;
2$cBlack: #000;
3
4#container {
5  text-align: center;
6}
7
8.btn {
9  background-color: $cWhite;
10  color: $cBlack;
11  border: 1px solid $cBlack;
12  padding: 10px 40px;
13  margin: 50px 0;
14  font-weight: 600;
15  cursor: pointer;
16  transition: all 0.3s;
17
18  &.slide-bg {
19    position: relative;
20    overflow: hidden;
21
22    & span {
23      display: inline-block;
24      width: 100%;
25      height: 100%;
26      position: absolute;
27      background-color: $cBlack;
28      top: 0;
29      left: 0;
30      transform: translateX(-100%);
31      transition: transform 0.3s;
32    }
33
34    &:hover {
35      color: $cWhite;
36
37      & span {
38      transform: none;
39      }
40    }
41  }
42}
43
44.z1{
45  z-index: 1;
46}
47
48.z2{
49  z-index: 2;
50  position: relative;
51}
52

Buttonという文字列はずっと、z-indexが0でした。なので、spanのz-indexが-1のときは上にきますが、1のときは下にきていたというわけです。

投稿2020/05/07 15:55

編集2020/05/07 16:00

okina

総合スコア471

tomoPhD-24

2020/05/08 13:28

すみません。そもそも私の認識が間違っている状態なんだと思います。教えて下さい。私のソースで、 .btnのBottonの文字はz-indexが0だったという認識であっていますでしょうか？認識があっていた場合、spanのz-indexが-1でBottonが上に来る事は理解できます。しかし、そうなるとhoverした際に、background-colorがspanの黒の上に.btnの白が被さり、 background-colorが白、Botton文字が白になるので真っ白の状態になると思ったのですが、そうならないのは何故でしょうか？