質問編集履歴
4
css記述ミスがあったので修正しました
test
CHANGED
File without changes
|
test
CHANGED
@@ -66,7 +66,7 @@
|
|
66
66
|
|
67
67
|
z-index: 100;
|
68
68
|
|
69
|
-
backgroud-color: #fff;
|
69
|
+
background-color: #fff;
|
70
70
|
|
71
71
|
&::after {
|
72
72
|
|
3
画像配置位置を変更しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,7 +1,3 @@
|
|
1
|
-
##![イメージ説明](94960b047fcbe5aeba762242ade13292.png)現したいこと
|
2
|
-
|
3
|
-
|
4
|
-
|
5
1
|
divで設定した要素に、背景としてストライプの要素を下に重ねたく
|
6
2
|
|
7
3
|
擬似クラス::afterを使ってコーディングしたところ、
|
2
理想をする見栄えのイメージを追加しました。
test
CHANGED
File without changes
|
test
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
##
|
1
|
+
##![イメージ説明](94960b047fcbe5aeba762242ade13292.png)現したいこと
|
2
2
|
|
3
3
|
|
4
4
|
|
@@ -127,3 +127,13 @@
|
|
127
127
|
これは、親要素に position:relative, z-index:-2 を指定することで見栄えは解消しましたが
|
128
128
|
|
129
129
|
次は要素内に入れたリンクボタンがクリックできなくなります。
|
130
|
+
|
131
|
+
|
132
|
+
|
133
|
+
![理想とする見栄え](f21e3e419a036a0bb6e8f4f7279da53d.png)
|
134
|
+
|
135
|
+
|
136
|
+
|
137
|
+
.itemに直接背景を入れては?というご指摘がありましたが、
|
138
|
+
|
139
|
+
.itemと.bgは異なる背景にしたいためこのような記述としています。
|
1
[css] .itemにbackground-color:#fffを追加 / 「親要素」という記述が紛らわしいため、クラス名を追加しました
test
CHANGED
File without changes
|
test
CHANGED
@@ -6,7 +6,7 @@
|
|
6
6
|
|
7
7
|
擬似クラス::afterを使ってコーディングしたところ、
|
8
8
|
|
9
|
-
z-indexの順番が効かず、要素の上に重なってしまいます。
|
9
|
+
z-indexの順番が効かず、親要素(.item)の上に重なってしまいます。
|
10
10
|
|
11
11
|
|
12
12
|
|
@@ -70,6 +70,8 @@
|
|
70
70
|
|
71
71
|
z-index: 100;
|
72
72
|
|
73
|
+
backgroud-color: #fff;
|
74
|
+
|
73
75
|
&::after {
|
74
76
|
|
75
77
|
content: "";
|
@@ -118,7 +120,7 @@
|
|
118
120
|
|
119
121
|
::after要素のz-indexを-1にしたところ、重なりのエラーは解消されましたが
|
120
122
|
|
121
|
-
親要素の背景の下になってしまうため、見えません。
|
123
|
+
親要素(.bg)の背景の下になってしまうため、見えません。
|
122
124
|
|
123
125
|
|
124
126
|
|