質問編集履歴

2

リンク修正

2018/09/30 07:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -138,7 +138,7 @@
138
138
 
139
139
  これを読みました
140
140
 
141
- [https://app.codegrid.net/entry/z-index-1]( https://app.codegrid.net/entry/z-index-1 )
141
+ [https://app.codegrid.net/entry/z-index-1](https://app.codegrid.net/entry/z-index-1)
142
142
 
143
143
 
144
144
 

1

a

2018/09/30 07:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -11,16 +11,6 @@
11
11
  これはなんでですか?z-indexを設定してないと全部zindex:autoになって、上から順に重ねられるからですか?
12
12
 
13
13
   
14
-
15
-
16
-
17
-  
18
-
19
-  
20
-
21
-
22
-
23
-
24
14
 
25
15
 
26
16
 
@@ -38,6 +28,114 @@
38
28
 
39
29
 
40
30
 
31
+
32
+
33
+ ## ソースコード
34
+
35
+ ```html
36
+
37
+ <div class="box1">
38
+
39
+ <div class="box3"></div>
40
+
41
+ <div class="box5"></div>
42
+
43
+ </div>
44
+
45
+ <div class="box2">
46
+
47
+ <div class="box4"></div>
48
+
49
+ <div class="box6"></div>
50
+
51
+ </div>
52
+
53
+ ```
54
+
55
+ ```css
56
+
57
+ div {
58
+
59
+ width: 250px;
60
+
61
+ height: 250px;
62
+
63
+ }
64
+
65
+
66
+
67
+ .box1 {
68
+
69
+ background: #ffa;
70
+
71
+ position: relative;
72
+
73
+ }
74
+
75
+
76
+
77
+ .box2 {
78
+
79
+ background: #faf;
80
+
81
+ position: relative;
82
+
83
+ }
84
+
85
+ .box3,
86
+
87
+ .box4 {
88
+
89
+ opacity: 0;
90
+
91
+ background: green;
92
+
93
+ }
94
+
95
+ .box1:hover .box3,
96
+
97
+ .box2:hover .box4 {
98
+
99
+ opacity: 1;
100
+
101
+ }
102
+
103
+
104
+
105
+ .box5,
106
+
107
+ .box6 {
108
+
109
+ display: none;
110
+
111
+ }
112
+
113
+
114
+
115
+ .box4:hover,
116
+
117
+ .box3:hover {
118
+
119
+ display: block;
120
+
121
+ position: fixed;
122
+
123
+ top: 0;
124
+
125
+ left: 0;
126
+
127
+ width: 100%;
128
+
129
+ height: 100%;
130
+
131
+ background: #aff;
132
+
133
+ }
134
+
135
+ ```
136
+
137
+
138
+
41
139
  これを読みました
42
140
 
43
141
  [https://app.codegrid.net/entry/z-index-1]( https://app.codegrid.net/entry/z-index-1 )