teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

コードを追加

2021/03/18 02:51

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

answer CHANGED
@@ -29,4 +29,25 @@
29
29
  ---
30
30
 
31
31
  つまり、スタッキングコンテキストを解消しない限り、子要素がその背景の後ろに回ることはできない、ということです。
32
- ですから、`transform: none`にすることができないのであれば、HTMLの構造を変えるか、あるいは`::after`疑似要素などを使って前景としてしまうか、しかないと思います。
32
+ ですから、`transform: none`にすることができないのであれば、HTMLの構造を変えるか、あるいは`::after`疑似要素などを使って前景としてしまうか、しかないと思います。
33
+
34
+ ---
35
+
36
+
37
+ 疑似要素で追加するパターンはこんな感じです。
38
+
39
+ ```css
40
+ .box {width: 300px;
41
+ height: 200px;
42
+ /* background-color: #222; 削除 */
43
+ position: relative;
44
+ }
45
+ /* 追加 */
46
+ .box::after {
47
+ content: '';
48
+ display: block;
49
+ width: 300px;
50
+ background-color: #222;
51
+ height: 200px;
52
+ }
53
+ ```

1

表現の修正

2021/03/18 02:51

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア37488

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