teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップHTML5に関する質問overflow:hiddenとmarginの関係性

編集履歴

回答編集履歴

6

一部見やすいようにコードを改善

2017/09/04 22:04

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -200,6 +200,8 @@
200
200
 
201
201
  margin-top: 250px;
202
202
 
203
+ margin-left: 10px;
204
+
203
205
  }
204
206
 
205
207
  </style>
@@ -240,7 +242,7 @@
240
242
 
241
243
  parentStyle.overflow = "";
242
244
 
243
- disp1.innerHTML = "childのmargin:250px;が適用";
245
+ disp1.innerHTML = "childのmargin-top: 250px;が適用";
244
246
 
245
247
  disp2.innerHTML = "";
246
248
 
@@ -250,9 +252,9 @@
250
252
 
251
253
  parentStyle.overflow = "hidden";
252
254
 
253
- disp1.innerHTML = "parentのmargin:100px;が適用";
255
+ disp1.innerHTML = "parentのmargin-top: 100px;が適用";
254
-
256
+
255
- disp2.innerHTML = "childのmargin:250px;が適用";
257
+ disp2.innerHTML = "childのmargin-top: 250px;が適用";
256
258
 
257
259
  button.innerHTML = "現在 : hidden";
258
260
 
@@ -268,7 +270,7 @@
268
270
 
269
271
  <body>
270
272
 
271
- <span id="disp1">childのmargin:250px;が適用</span>
273
+ <span id="disp1">childのmargin-top: 250px;が適用</span>
272
274
 
273
275
  <div class="parent">
274
276
 

5

;を付け足し

2017/09/04 22:04

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -222,7 +222,7 @@
222
222
 
223
223
  disp1 = document.getElementById("disp1");
224
224
 
225
- parent = document.getElementsByClassName("parent")[0]
225
+ parent = document.getElementsByClassName("parent")[0];
226
226
 
227
227
  disp2 = document.getElementById("disp2");
228
228
 

4

インデントを修正

2017/09/04 19:53

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -186,9 +186,9 @@
186
186
 
187
187
  .parent {
188
188
 
189
- background-color: red;
189
+ background-color: red;
190
-
190
+
191
- margin-top: 100px;
191
+ margin-top: 100px;
192
192
 
193
193
  }
194
194
 
@@ -196,9 +196,9 @@
196
196
 
197
197
  .child {
198
198
 
199
- background-color: yellow;
199
+ background-color: yellow;
200
-
200
+
201
- margin-top: 250px;
201
+ margin-top: 250px;
202
202
 
203
203
  }
204
204
 
@@ -220,49 +220,45 @@
220
220
 
221
221
  window.onload = function(){
222
222
 
223
- disp1 = document.getElementById("disp1");
223
+ disp1 = document.getElementById("disp1");
224
-
224
+
225
- parent = document.getElementsByClassName("parent")[0]
225
+ parent = document.getElementsByClassName("parent")[0]
226
-
226
+
227
- disp2 = document.getElementById("disp2");
227
+ disp2 = document.getElementById("disp2");
228
-
228
+
229
- button = document.getElementById("button");
229
+ button = document.getElementById("button");
230
-
231
-
232
-
233
-
234
-
230
+
231
+
232
+
233
+
234
+
235
- button.addEventListener("click",function(){
235
+ button.addEventListener("click",function(){
236
-
236
+
237
- parentStyle = parent.style;
237
+ parentStyle = parent.style;
238
-
238
+
239
- if(parentStyle.overflow=="hidden"){
239
+ if(parentStyle.overflow=="hidden"){
240
-
240
+
241
- parentStyle.overflow = "";
241
+ parentStyle.overflow = "";
242
-
242
+
243
- disp1.innerHTML = "childのmargin:250px;が適用";
243
+ disp1.innerHTML = "childのmargin:250px;が適用";
244
-
244
+
245
- disp2.innerHTML = "";
245
+ disp2.innerHTML = "";
246
-
247
-
248
-
246
+
249
- button.innerHTML = "現在 : none";
247
+ button.innerHTML = "現在 : none";
250
-
248
+
251
- }else{
249
+ }else{
252
-
250
+
253
- parentStyle.overflow = "hidden";
251
+ parentStyle.overflow = "hidden";
254
-
252
+
255
- disp1.innerHTML = "parentのmargin:100px;が適用";
253
+ disp1.innerHTML = "parentのmargin:100px;が適用";
256
-
254
+
257
- disp2.innerHTML = "childのmargin:250px;が適用";
255
+ disp2.innerHTML = "childのmargin:250px;が適用";
258
-
259
-
260
-
256
+
261
- button.innerHTML = "現在 : hidden";
257
+ button.innerHTML = "現在 : hidden";
262
-
258
+
263
- }
259
+ }
264
-
260
+
265
- },false);
261
+ },false);
266
262
 
267
263
  }
268
264
 

3

調べ直し、色々追記しました。

2017/09/04 19:43

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -1,3 +1,7 @@
1
+ ※追記しました。見ていただけると幸いです。
2
+
3
+
4
+
1
5
  同じく初心者ですが、簡単にテスト用のHTMLを書いてみました。
2
6
 
3
7
 
@@ -119,3 +123,179 @@
119
123
 
120
124
 
121
125
  参考になれば。
126
+
127
+
128
+
129
+ ###追記
130
+
131
+
132
+
133
+ ごめんなさい私自信相殺についてわかってなかったみたいです。
134
+
135
+
136
+
137
+ maisumakun様やMasakazuFukami様の回答を読ませていただいてから調べました。
138
+
139
+
140
+
141
+ ただ私が間違ってしまったのは、(私の場合はですが)最初からoverflowが設定されていた時の挙動の方が自然に見えたからかもしれません。
142
+
143
+
144
+
145
+ その挙動というのは、overflowを設定すると、子要素のmarginがbodyに対してではなく、parentに対して行われるようになる、というものです。最初から全てこういう仕様(marginは常に直近の親要素に対して適用されるという仕様)の方がいいように私は感じましたが、
146
+
147
+ 何か理由があるのだと思います。(多分その理由というのが他の回答者様のおっしゃる仕様関連のところにあるのでしょう。)
148
+
149
+
150
+
151
+ overflowがないと子要素のmarginはbodyに対するものになっていますね。
152
+
153
+ ある場合はparentに対するものになっていますから、構造的なもの、となるとこの挙動が解決案にはならないでしょうか？
154
+
155
+
156
+
157
+ また質問者様の質問を読んでいると、むしろ「相殺されるのはなぜですか？」みたいになるのかと思いました。
158
+
159
+
160
+
161
+ というのはもしoverflow:hidden;によってbodyに対してmarginがついたままで、parentのmarginがchildのmarginより大きく、さらに相殺されないならば、childの方はparentより上に行くことで、childの一部または全部がhiddenをvisibleにしないと見ることができない領域に行くであろうからです。
162
+
163
+
164
+
165
+ 実際はparentからのmarginとなるので、子要素はあたかも相殺されたかのように下に行き、さらには自身のmarginによってさらに下に行きます。
166
+
167
+
168
+
169
+ その様子を見れるように改めてhtmlを書いてみました。言いたいことが伝われば幸いです。
170
+
171
+
172
+
173
+ ```lang-html
174
+
175
+ <!doctype html>
176
+
177
+ <html>
178
+
179
+ <head>
180
+
181
+ <meta charset="utf-8">
182
+
183
+ <title>sousai</title>
184
+
185
+ <style>
186
+
187
+ .parent {
188
+
189
+ background-color: red;
190
+
191
+ margin-top: 100px;
192
+
193
+ }
194
+
195
+
196
+
197
+ .child {
198
+
199
+ background-color: yellow;
200
+
201
+ margin-top: 250px;
202
+
203
+ }
204
+
205
+ </style>
206
+
207
+ <script>
208
+
209
+ var disp1;
210
+
211
+ var parent;
212
+
213
+ var parentStyle;
214
+
215
+ var disp2;
216
+
217
+ var button;
218
+
219
+
220
+
221
+ window.onload = function(){
222
+
223
+ disp1 = document.getElementById("disp1");
224
+
225
+ parent = document.getElementsByClassName("parent")[0]
226
+
227
+ disp2 = document.getElementById("disp2");
228
+
229
+ button = document.getElementById("button");
230
+
231
+
232
+
233
+
234
+
235
+ button.addEventListener("click",function(){
236
+
237
+ parentStyle = parent.style;
238
+
239
+ if(parentStyle.overflow=="hidden"){
240
+
241
+ parentStyle.overflow = "";
242
+
243
+ disp1.innerHTML = "childのmargin:250px;が適用";
244
+
245
+ disp2.innerHTML = "";
246
+
247
+
248
+
249
+ button.innerHTML = "現在 : none";
250
+
251
+ }else{
252
+
253
+ parentStyle.overflow = "hidden";
254
+
255
+ disp1.innerHTML = "parentのmargin:100px;が適用";
256
+
257
+ disp2.innerHTML = "childのmargin:250px;が適用";
258
+
259
+
260
+
261
+ button.innerHTML = "現在 : hidden";
262
+
263
+ }
264
+
265
+ },false);
266
+
267
+ }
268
+
269
+ </script>
270
+
271
+ </head>
272
+
273
+ <body>
274
+
275
+ <span id="disp1">childのmargin:250px;が適用</span>
276
+
277
+ <div class="parent">
278
+
279
+ <span id="disp2"></span>
280
+
281
+ <div class="child">
282
+
283
+ child
284
+
285
+ </div>
286
+
287
+ parent
288
+
289
+ </div>
290
+
291
+ <button id="button">現在 : none</button>
292
+
293
+ </body>
294
+
295
+ </html>
296
+
297
+ ```
298
+
299
+
300
+
301
+ (長文、乱文、また初心者な回答、失礼しました。m(_ _)m)

2

template->overflow

2017/09/04 19:35

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  <meta charset="utf-8">
14
14
 
15
- <title>template</title>
15
+ <title>overflow</title>
16
16
 
17
17
  <style type="text/css">
18
18
 

1

わかりやすいよう内容を一部変更

2017/09/04 13:42

投稿

namnium1125
namnium1125

スコア2045

test CHANGED
@@ -58,7 +58,11 @@
58
58
 
59
59
  window.onload = function(){
60
60
 
61
+ var button_elem = document.getElementById('button');
62
+
63
+
64
+
61
- document.getElementById('button').addEventListener("click",function(){
65
+ button_elem.addEventListener("click",function(){
62
66
 
63
67
  var parentStyle = document.getElementById('parent').style;
64
68
 
@@ -66,9 +70,13 @@
66
70
 
67
71
  parentStyle.overflow = 'visible';
68
72
 
73
+ button_elem.innerHTML = '現在 : visible';
74
+
69
75
  }else{
70
76
 
71
77
  parentStyle.overflow = 'hidden';
78
+
79
+ button_elem.innerHTML = '現在 : hidden';
72
80
 
73
81
  }
74
82
 
@@ -96,7 +104,7 @@
96
104
 
97
105
  <br />
98
106
 
99
- <button id="button">表示切り替え</button>
107
+ <button id="button">現在 : visible</button>
100
108
 
101
109
  </body>
102
110