質問編集履歴

4

css記述ミスがあったので修正しました

2021/02/24 04:08

投稿

patsuco
patsuco

スコア2

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

画像配置位置を変更しました。

2021/02/24 04:07

投稿

patsuco
patsuco

スコア2

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

理想をする見栄えのイメージを追加しました。

2021/02/24 04:06

投稿

patsuco
patsuco

スコア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を追加 / 「親要素」という記述が紛らわしいため、クラス名を追加しました

2021/02/24 04:05

投稿

patsuco
patsuco

スコア2

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