回答編集履歴

2

コードを追加

2021/03/18 02:51

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36928

test CHANGED
@@ -61,3 +61,45 @@
61
61
  つまり、スタッキングコンテキストを解消しない限り、子要素がその背景の後ろに回ることはできない、ということです。
62
62
 
63
63
  ですから、`transform: none`にすることができないのであれば、HTMLの構造を変えるか、あるいは`::after`疑似要素などを使って前景としてしまうか、しかないと思います。
64
+
65
+
66
+
67
+ ---
68
+
69
+
70
+
71
+
72
+
73
+ 疑似要素で追加するパターンはこんな感じです。
74
+
75
+
76
+
77
+ ```css
78
+
79
+ .box {width: 300px;
80
+
81
+ height: 200px;
82
+
83
+ /* background-color: #222; 削除 */
84
+
85
+ position: relative;
86
+
87
+ }
88
+
89
+ /* 追加 */
90
+
91
+ .box::after {
92
+
93
+ content: '';
94
+
95
+ display: block;
96
+
97
+ width: 300px;
98
+
99
+ background-color: #222;
100
+
101
+ height: 200px;
102
+
103
+ }
104
+
105
+ ```

1

表現の修正

2021/03/18 02:51

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36928

test CHANGED
@@ -60,4 +60,4 @@
60
60
 
61
61
  つまり、スタッキングコンテキストを解消しない限り、子要素がその背景の後ろに回ることはできない、ということです。
62
62
 
63
- ですから、`transform: none`にすることができないのであれば、HTMLの構造を変えるしかないす。
63
+ ですから、`transform: none`にすることができないのであれば、HTMLの構造を変えるか、あるいは`::after`疑似要素などを使って前景とてしまう、しかないと思います。