回答編集履歴
6
一部見やすいようにコードを改善
answer
CHANGED
@@ -99,6 +99,7 @@
|
|
99
99
|
.child {
|
100
100
|
background-color: yellow;
|
101
101
|
margin-top: 250px;
|
102
|
+
margin-left: 10px;
|
102
103
|
}
|
103
104
|
</style>
|
104
105
|
<script>
|
@@ -119,13 +120,13 @@
|
|
119
120
|
parentStyle = parent.style;
|
120
121
|
if(parentStyle.overflow=="hidden"){
|
121
122
|
parentStyle.overflow = "";
|
122
|
-
disp1.innerHTML = "childのmargin:250px;が適用";
|
123
|
+
disp1.innerHTML = "childのmargin-top: 250px;が適用";
|
123
124
|
disp2.innerHTML = "";
|
124
125
|
button.innerHTML = "現在 : none";
|
125
126
|
}else{
|
126
127
|
parentStyle.overflow = "hidden";
|
127
|
-
disp1.innerHTML = "parentのmargin:100px;が適用";
|
128
|
+
disp1.innerHTML = "parentのmargin-top: 100px;が適用";
|
128
|
-
disp2.innerHTML = "childのmargin:250px;が適用";
|
129
|
+
disp2.innerHTML = "childのmargin-top: 250px;が適用";
|
129
130
|
button.innerHTML = "現在 : hidden";
|
130
131
|
}
|
131
132
|
},false);
|
@@ -133,7 +134,7 @@
|
|
133
134
|
</script>
|
134
135
|
</head>
|
135
136
|
<body>
|
136
|
-
<span id="disp1">childのmargin:250px;が適用</span>
|
137
|
+
<span id="disp1">childのmargin-top: 250px;が適用</span>
|
137
138
|
<div class="parent">
|
138
139
|
<span id="disp2"></span>
|
139
140
|
<div class="child">
|
5
;を付け足し
answer
CHANGED
@@ -110,7 +110,7 @@
|
|
110
110
|
|
111
111
|
window.onload = function(){
|
112
112
|
disp1 = document.getElementById("disp1");
|
113
|
-
parent = document.getElementsByClassName("parent")[0]
|
113
|
+
parent = document.getElementsByClassName("parent")[0];
|
114
114
|
disp2 = document.getElementById("disp2");
|
115
115
|
button = document.getElementById("button");
|
116
116
|
|
4
インデントを修正
answer
CHANGED
@@ -92,13 +92,13 @@
|
|
92
92
|
<title>sousai</title>
|
93
93
|
<style>
|
94
94
|
.parent {
|
95
|
-
|
95
|
+
background-color: red;
|
96
|
-
|
96
|
+
margin-top: 100px;
|
97
97
|
}
|
98
98
|
|
99
99
|
.child {
|
100
|
-
|
100
|
+
background-color: yellow;
|
101
|
-
|
101
|
+
margin-top: 250px;
|
102
102
|
}
|
103
103
|
</style>
|
104
104
|
<script>
|
@@ -109,28 +109,26 @@
|
|
109
109
|
var button;
|
110
110
|
|
111
111
|
window.onload = function(){
|
112
|
-
|
112
|
+
disp1 = document.getElementById("disp1");
|
113
|
-
|
113
|
+
parent = document.getElementsByClassName("parent")[0]
|
114
|
-
|
114
|
+
disp2 = document.getElementById("disp2");
|
115
|
-
|
115
|
+
button = document.getElementById("button");
|
116
116
|
|
117
117
|
|
118
|
-
|
118
|
+
button.addEventListener("click",function(){
|
119
|
-
|
119
|
+
parentStyle = parent.style;
|
120
|
-
|
120
|
+
if(parentStyle.overflow=="hidden"){
|
121
|
-
|
121
|
+
parentStyle.overflow = "";
|
122
|
-
|
122
|
+
disp1.innerHTML = "childのmargin:250px;が適用";
|
123
|
-
|
123
|
+
disp2.innerHTML = "";
|
124
|
-
|
125
|
-
|
124
|
+
button.innerHTML = "現在 : none";
|
126
|
-
|
125
|
+
}else{
|
127
|
-
|
126
|
+
parentStyle.overflow = "hidden";
|
128
|
-
|
127
|
+
disp1.innerHTML = "parentのmargin:100px;が適用";
|
129
|
-
|
128
|
+
disp2.innerHTML = "childのmargin:250px;が適用";
|
130
|
-
|
131
|
-
|
129
|
+
button.innerHTML = "現在 : hidden";
|
132
|
-
|
130
|
+
}
|
133
|
-
|
131
|
+
},false);
|
134
132
|
}
|
135
133
|
</script>
|
136
134
|
</head>
|
3
調べ直し、色々追記しました。
answer
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
※追記しました。見ていただけると幸いです。
|
2
|
+
|
1
3
|
同じく初心者ですが、簡単にテスト用のHTMLを書いてみました。
|
2
4
|
|
3
5
|
```lang-html
|
@@ -58,4 +60,92 @@
|
|
58
60
|
|
59
61
|
ボタンをクリックしてもらえばわかると思いますが、そもそもoverflowとmarginは関係ないように見えます。
|
60
62
|
|
61
|
-
参考になれば。
|
63
|
+
参考になれば。
|
64
|
+
|
65
|
+
###追記
|
66
|
+
|
67
|
+
ごめんなさい私自信相殺についてわかってなかったみたいです。
|
68
|
+
|
69
|
+
maisumakun様やMasakazuFukami様の回答を読ませていただいてから調べました。
|
70
|
+
|
71
|
+
ただ私が間違ってしまったのは、(私の場合はですが)最初からoverflowが設定されていた時の挙動の方が自然に見えたからかもしれません。
|
72
|
+
|
73
|
+
その挙動というのは、overflowを設定すると、子要素のmarginがbodyに対してではなく、parentに対して行われるようになる、というものです。最初から全てこういう仕様(marginは常に直近の親要素に対して適用されるという仕様)の方がいいように私は感じましたが、
|
74
|
+
何か理由があるのだと思います。(多分その理由というのが他の回答者様のおっしゃる仕様関連のところにあるのでしょう。)
|
75
|
+
|
76
|
+
overflowがないと子要素のmarginはbodyに対するものになっていますね。
|
77
|
+
ある場合はparentに対するものになっていますから、構造的なもの、となるとこの挙動が解決案にはならないでしょうか?
|
78
|
+
|
79
|
+
また質問者様の質問を読んでいると、むしろ「相殺されるのはなぜですか?」みたいになるのかと思いました。
|
80
|
+
|
81
|
+
というのはもしoverflow:hidden;によってbodyに対してmarginがついたままで、parentのmarginがchildのmarginより大きく、さらに相殺されないならば、childの方はparentより上に行くことで、childの一部または全部がhiddenをvisibleにしないと見ることができない領域に行くであろうからです。
|
82
|
+
|
83
|
+
実際はparentからのmarginとなるので、子要素はあたかも相殺されたかのように下に行き、さらには自身のmarginによってさらに下に行きます。
|
84
|
+
|
85
|
+
その様子を見れるように改めてhtmlを書いてみました。言いたいことが伝われば幸いです。
|
86
|
+
|
87
|
+
```lang-html
|
88
|
+
<!doctype html>
|
89
|
+
<html>
|
90
|
+
<head>
|
91
|
+
<meta charset="utf-8">
|
92
|
+
<title>sousai</title>
|
93
|
+
<style>
|
94
|
+
.parent {
|
95
|
+
background-color: red;
|
96
|
+
margin-top: 100px;
|
97
|
+
}
|
98
|
+
|
99
|
+
.child {
|
100
|
+
background-color: yellow;
|
101
|
+
margin-top: 250px;
|
102
|
+
}
|
103
|
+
</style>
|
104
|
+
<script>
|
105
|
+
var disp1;
|
106
|
+
var parent;
|
107
|
+
var parentStyle;
|
108
|
+
var disp2;
|
109
|
+
var button;
|
110
|
+
|
111
|
+
window.onload = function(){
|
112
|
+
disp1 = document.getElementById("disp1");
|
113
|
+
parent = document.getElementsByClassName("parent")[0]
|
114
|
+
disp2 = document.getElementById("disp2");
|
115
|
+
button = document.getElementById("button");
|
116
|
+
|
117
|
+
|
118
|
+
button.addEventListener("click",function(){
|
119
|
+
parentStyle = parent.style;
|
120
|
+
if(parentStyle.overflow=="hidden"){
|
121
|
+
parentStyle.overflow = "";
|
122
|
+
disp1.innerHTML = "childのmargin:250px;が適用";
|
123
|
+
disp2.innerHTML = "";
|
124
|
+
|
125
|
+
button.innerHTML = "現在 : none";
|
126
|
+
}else{
|
127
|
+
parentStyle.overflow = "hidden";
|
128
|
+
disp1.innerHTML = "parentのmargin:100px;が適用";
|
129
|
+
disp2.innerHTML = "childのmargin:250px;が適用";
|
130
|
+
|
131
|
+
button.innerHTML = "現在 : hidden";
|
132
|
+
}
|
133
|
+
},false);
|
134
|
+
}
|
135
|
+
</script>
|
136
|
+
</head>
|
137
|
+
<body>
|
138
|
+
<span id="disp1">childのmargin:250px;が適用</span>
|
139
|
+
<div class="parent">
|
140
|
+
<span id="disp2"></span>
|
141
|
+
<div class="child">
|
142
|
+
child
|
143
|
+
</div>
|
144
|
+
parent
|
145
|
+
</div>
|
146
|
+
<button id="button">現在 : none</button>
|
147
|
+
</body>
|
148
|
+
</html>
|
149
|
+
```
|
150
|
+
|
151
|
+
(長文、乱文、また初心者な回答、失礼しました。m(_ _)m)
|
2
template->overflow
answer
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
<html>
|
6
6
|
<head>
|
7
7
|
<meta charset="utf-8">
|
8
|
-
<title>
|
8
|
+
<title>overflow</title>
|
9
9
|
<style type="text/css">
|
10
10
|
#parent {
|
11
11
|
background-color: lightskyblue;
|
1
わかりやすいよう内容を一部変更
answer
CHANGED
@@ -28,12 +28,16 @@
|
|
28
28
|
<script>
|
29
29
|
|
30
30
|
window.onload = function(){
|
31
|
+
var button_elem = document.getElementById('button');
|
32
|
+
|
31
|
-
|
33
|
+
button_elem.addEventListener("click",function(){
|
32
34
|
var parentStyle = document.getElementById('parent').style;
|
33
35
|
if(parentStyle.overflow == 'hidden'){
|
34
36
|
parentStyle.overflow = 'visible';
|
37
|
+
button_elem.innerHTML = '現在 : visible';
|
35
38
|
}else{
|
36
39
|
parentStyle.overflow = 'hidden';
|
40
|
+
button_elem.innerHTML = '現在 : hidden';
|
37
41
|
}
|
38
42
|
},false);
|
39
43
|
}
|
@@ -47,7 +51,7 @@
|
|
47
51
|
</div>
|
48
52
|
</div>
|
49
53
|
<br />
|
50
|
-
<button id="button">
|
54
|
+
<button id="button">現在 : visible</button>
|
51
55
|
</body>
|
52
56
|
</html>
|
53
57
|
```
|