teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問iOSで背景固定するには

編集履歴

回答編集履歴

6

fixedへの修正

2019/02/26 02:29

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  .box_background{
10
10
 
11
- position: absolute;
11
+ position: fixed;
12
12
 
13
13
  　　top: 0px;
14
14
 

5

階層の修正

2019/02/26 02:29

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  height: 100%;
20
20
 
21
- z-index: 1;
21
+ z-index: 0;
22
22
 
23
23
  }
24
24
 

4

閉じタグの修正

2019/02/18 02:19

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -40,6 +40,8 @@
40
40
 
41
41
  }
42
42
 
43
+ ```
44
+
43
45
 
44
46
 
45
47
  要はz-indexプロパティを使って、要素を上下構造にして、.box_backgroundには背景だけを配置し、
@@ -57,7 +59,3 @@
57
59
  上だとbody要素に.drawerを使っていますが、ラッパー要素の方に.drawerを
58
60
 
59
61
  使うようにしてください。
60
-
61
-
62
-
63
- ```

3

誤字の修正

2019/02/18 02:18

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -12,11 +12,11 @@
12
12
 
13
13
  　　top: 0px;
14
14
 
15
- height: 0px;
15
+ left: 0px;
16
16
 
17
17
  　　width: 100%;
18
18
 
19
- heiht: 100%;
19
+ height: 100%;
20
20
 
21
21
  z-index: 1;
22
22
 
@@ -28,15 +28,15 @@
28
28
 
29
29
  position: relative;
30
30
 
31
+ top: 0px;
32
+
33
+ left: 0px;
34
+
31
35
  width: 100%;
32
36
 
33
37
  height: 100%;
34
38
 
35
- top: 0px;
36
-
37
- left: 0px;
38
-
39
- z-index: 99;
39
+ z-index: 1;
40
40
 
41
41
  }
42
42
 
@@ -60,14 +60,4 @@
60
60
 
61
61
 
62
62
 
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
63
  ```

2

クラスの名称変更

2019/02/18 02:17

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  /*固定する背景のエリア*/
8
8
 
9
- .box1{
9
+ .box_background{
10
10
 
11
11
  position: absolute;
12
12
 
@@ -24,7 +24,7 @@
24
24
 
25
25
  /*スクロールされるエリア*/
26
26
 
27
- .box2{
27
+ .box_wrapper{
28
28
 
29
29
  position: relative;
30
30
 
@@ -42,9 +42,9 @@
42
42
 
43
43
 
44
44
 
45
- 要はz-indexプロパティを使って、要素を上下構造にして、.box1には背景だけを配置し、
45
+ 要はz-indexプロパティを使って、要素を上下構造にして、.box_backgroundには背景だけを配置し、
46
46
 
47
- .box2にはtopとleftを同じにして、コンテンツを配置していくわけです。
47
+ .box_wrapperにはtopとleftを同じにして、コンテンツを配置していくわけです。
48
48
 
49
49
 
50
50
 

1

説明の補足

2019/02/18 02:16

投稿

FKM
FKM

スコア3640

test CHANGED
@@ -9,6 +9,10 @@
9
9
  .box1{
10
10
 
11
11
  position: absolute;
12
+
13
+ 　　top: 0px;
14
+
15
+ height: 0px;
12
16
 
13
17
  　　width: 100%;
14
18
 
@@ -38,15 +42,21 @@
38
42
 
39
43
 
40
44
 
41
- 要はz-indexプロパティを使って、要素を上下構造にして、.box1には背景だけを配置し、.box2にはtopとleftを同じにして、コンテンツを配置していくわけです。
45
+ 要はz-indexプロパティを使って、要素を上下構造にして、.box1には背景だけを配置し、
46
+
47
+ .box2にはtopとleftを同じにして、コンテンツを配置していくわけです。
42
48
 
43
49
 
44
50
 
45
- body要素に直接クラスを設けるやり方ではなく、従来のwebページのように背景用の要素とコンテンツ用のラッパー要素を作って上のhtmlに当てはめていきます。
51
+ body要素に直接クラスを設けるやり方ではなく、従来のwebページのように背景用の要素と
52
+
53
+ コンテンツ用のラッパー要素を作って上のhtmlに当てはめていきます。
46
54
 
47
55
 
48
56
 
49
- 上だとbody要素に.drawerを使っていますが、ラッパー要素の方に.drawer要素を使うようにしてください。
57
+ 上だとbody要素に.drawerを使っていますが、ラッパー要素の方に.drawerを
58
+
59
+ 使うようにしてください。
50
60
 
51
61
 
52
62