回答編集履歴
3
書式の改善
test
CHANGED
|
@@ -54,19 +54,19 @@
|
|
|
54
54
|
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
1. スタックコンテキスト（今回は<html>のみ）の背景とボーダー
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
2. スタックレベルが負である子スタックコンテキストとその子孫
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
3. インラインレベル以外の要素（ただし2, 6, 7は除外）
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
4. フロートしている要素（ただし2, 6, 7は除外）
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
5. インラインレベルの要素（ただし2, 6, 7は除外）
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
6. スタックレベルが0である子スタックコンテキストとその子孫、あるいはポジショニングされている要素
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
7. スタックレベルが正である子スタックコンテキストとその子孫
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
2
書式の改善
test
CHANGED
|
@@ -34,19 +34,19 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
1. the background and borders of the element forming the stacking context.
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
2. the child stacking contexts with negative stack levels (most negative first).
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
3. the in-flow, non-inline-level, non-positioned descendants.
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
4. the non-positioned floats.
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
7. the child stacking contexts with positive stack levels (least positive first).
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
|
@@ -74,19 +74,19 @@
|
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
|
|
77
|
+
1. （該当なし）
|
|
78
78
|
|
|
79
|
-
|
|
79
|
+
2. （該当なし）
|
|
80
80
|
|
|
81
|
-
|
|
81
|
+
3. .overpanelの背景（ただし、.overpanelの中身のインラインレベルのものは描画されない）
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
4. （該当なし）
|
|
84
84
|
|
|
85
|
-
|
|
85
|
+
5. iframe、img、テキストなど（.overpanelの中身のものも含む）
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
6. （該当なし）
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
7. （該当なし）
|
|
90
90
|
|
|
91
91
|
|
|
92
92
|
|
|
@@ -110,13 +110,17 @@
|
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
113
117
|
上の解説は細かなことまで書いており分かりにくくなりましたが、要するに一般的なHTMLでは、下の順で描画されます。
|
|
114
118
|
|
|
115
119
|
|
|
116
120
|
|
|
117
|
-
|
|
121
|
+
1. ブロックレベル要素の背景色（ソース順）
|
|
118
122
|
|
|
119
|
-
|
|
123
|
+
2. 他のすべてのインラインレベル要素とテキスト（ソース順）
|
|
120
124
|
|
|
121
125
|
|
|
122
126
|
|
|
@@ -140,19 +144,19 @@
|
|
|
140
144
|
|
|
141
145
|
|
|
142
146
|
|
|
143
|
-
|
|
147
|
+
1. （該当なし）
|
|
144
148
|
|
|
145
|
-
|
|
149
|
+
2. （該当なし）
|
|
146
150
|
|
|
147
|
-
|
|
151
|
+
3. **（該当なし）**
|
|
148
152
|
|
|
149
|
-
|
|
153
|
+
4. （該当なし）
|
|
150
154
|
|
|
151
|
-
|
|
155
|
+
5. iframe、img、テキストなど
|
|
152
156
|
|
|
153
|
-
|
|
157
|
+
6. **.overpanel**
|
|
154
158
|
|
|
155
|
-
|
|
159
|
+
7. （該当なし）
|
|
156
160
|
|
|
157
161
|
|
|
158
162
|
|
1
わかりやすいように修正
test
CHANGED
|
@@ -92,9 +92,7 @@
|
|
|
92
92
|
|
|
93
93
|
同じ数字に分類されているものは、HTMLの順番に描画されます。
|
|
94
94
|
|
|
95
|
-
ここで、iframe がインラインレベルの要素に分類されています。
|
|
96
|
-
|
|
97
|
-
たしかに `display: block;` が指定されていますが、iframeは置換インライン要素なので本体部分はインライン要素と見なされ
|
|
95
|
+
（iframe がインラインレベルの要素に分類されています。たしかに `display: block;` が指定されていますが、iframeは置換インライン要素なので本体部分はインライン要素と見なされるためです。）
|
|
98
96
|
|
|
99
97
|
|
|
100
98
|
|
|
@@ -108,7 +106,17 @@
|
|
|
108
106
|
|
|
109
107
|
のように描画される訳です。
|
|
110
108
|
|
|
111
|
-
「iframeの優先度が強い」というよりかは、**「
|
|
109
|
+
「iframeの優先度が強い」というよりかは、**「.overpanelの背景色の優先度が低い」**のです。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
上の解説は細かなことまで書いており分かりにくくなりましたが、要するに一般的なHTMLでは、下の順で描画されます。
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
- ブロックレベル要素の背景色（ソース順）
|
|
118
|
+
|
|
119
|
+
- 他のすべてのインラインレベル要素とテキスト（ソース順）
|
|
112
120
|
|
|
113
121
|
|
|
114
122
|
|