teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問position:fixedを使用すると背景が透過する

編集履歴

質問編集履歴

6

編集を一つ前のものに復元

2019/07/08 06:33

投稿

tetutetu
tetutetu

スコア419

test CHANGED
@@ -1 +1 @@
1
- position:fixedと右寄せの併用ができない
1
+ position:fixedを使用すると背景が透過する
test CHANGED
@@ -1,30 +1,14 @@
1
1
  ### 前提・実現したいこと
2
-
3
-
4
2
 
5
3
  サイト内全ページで共通のスタイルを持ったヘッダーを、ページ上部に固定、かつ指定した色の（今回は白）背景で持たせたい
6
4
 
7
- →追加　上記機能、かつ文字、ボタンをを右寄せで表示したい。
5
+ （ちょうどteratailのような動作をするヘッダーを作りたい）
8
-
9
-
10
6
 
11
7
  ### 発生している問題・エラーメッセージ
12
-
13
-
14
8
 
15
9
  背景色が意図したとおり動作しており、ヘッダーが固定されていない状態で
16
10
 
17
11
  cssにposition:fixedを記述したところ、背景色が消える、右寄せが適用されない等の問題が発生した
18
-
19
-
20
-
21
- 追記：
22
-
23
- 背景色が消える問題に関しては解決したものの、文字列やボタンが左寄せになってしまう。
24
-
25
- また、height次第で、中身の要素に上から被さる形になってしまう。
26
-
27
-
28
12
 
29
13
  ### 該当のソースコード
30
14
 
@@ -66,27 +50,35 @@
66
50
 
67
51
  ```jsp
68
52
 
53
+ <html>
54
+
55
+ <head>
56
+
57
+ <meta charset="UTF-8">
58
+
69
59
  <link rel="stylesheet" href="./css/header_test.css">
70
60
 
71
- <header>
61
+ </head>
72
62
 
73
- <div class ="right">
63
+ <body>
74
64
 
75
- <p>
65
+ <header class="site-header">
76
66
 
77
- ○○ さんでログインしています。
67
+ <p class="right">
78
68
 
79
- <input type="button"value="ログアウト">
69
+ ○○ さんでログインしています。
80
70
 
81
- <input type="button"value="メニューへ">
71
+ <input type="button"value="ログアウト">
82
72
 
83
- <input type="button"value="ヘルプ">
73
+ <input type="button"value="メニューへ">
84
74
 
85
- </p>
75
+ <input type="button"value="ヘルプ">
86
76
 
87
- </div>
77
+ </p>
88
78
 
89
- </header>
79
+ </header>
80
+
81
+ </html>
90
82
 
91
83
  ```
92
84
 
@@ -94,29 +86,35 @@
94
86
 
95
87
  ```css
96
88
 
89
+ .header-class{
90
+
91
+ /*position:fixed;*/
92
+
93
+ background:white;
94
+
95
+ }
96
+
97
+ #header-id{
98
+
99
+ background-color:white;
100
+
101
+ }
102
+
97
103
  .right{
98
104
 
99
- width:100%;
105
+ float: right;
100
106
 
101
- float: right;
107
+ /*position:fixed;*/
102
108
 
103
- right:0;
109
+ right:0;
104
110
 
105
- position:fixed;
106
-
107
- top:15px;
111
+ top:15px;
108
-
109
- background-color:#FFFFFF;
110
112
 
111
113
  }
112
114
 
113
115
  ```
114
116
 
115
-
116
-
117
- ### 試したこと（背景色について、解決済と思われる）
117
+ ### 試したこと
118
-
119
-
120
118
 
121
119
  ・header-classにposition:fixedを持たせた状態、持たせない状態でそれぞれ表示した
122
120
 
@@ -124,11 +122,19 @@
124
122
 
125
123
  （これ以上スクロールすると枠が見えなくなるため、止めてあります。実際はこのままスクロールし続けると白枠が見えない状態（画像３と同じような状態）になります。
126
124
 
125
+ 画像１
127
126
 
127
+ ![画像１](ad28a2650033c153625b0c64fcebc79e.png)
128
+
129
+ 画像２
130
+
131
+ ![画像２](2a25a24e529701091425976c9a6581eb.png)
128
132
 
129
133
  →持たせた場合（画像３）、背景色が消え、ボタン類のみが上部に固定されて動きます。
130
134
 
135
+ 画像３
131
136
 
137
+ ![画像３](28fc6d70168bd518a0cf745a37d747ea.png)
132
138
 
133
139
  ・右寄せ用クラスのrightにpisition:fixedを持たせた場合（上記画像１２３）、持たせない場合で検証した
134
140
 
@@ -136,28 +142,14 @@
136
142
 
137
143
  右寄せが解除されてしまう、さらに中身の要素に被さり、要素が一部見えなくなる（画像４）
138
144
 
145
+ 画像４
139
146
 
147
+ ![画像４](5e7672a568af33592d1991047df4aa78.png)
140
148
 
141
149
  ### 追記
142
150
 
143
- ※画像１～４については、質問の追記に伴い本文長を削るため、削除させていただきました。
151
+ jQuery利用での方法を回答していただき、ローカルファイルの方へ反映、表示を行ったところ、ヘッダーが非表示になってしまっている状態です。（画像５）
144
-
145
-
146
-
147
- ### 試したこと（右寄せについて）
148
-
149
- rightクラスに以下を記述（実行後画像５）
150
-
151
- float: right;
152
-
153
- right:0;
154
-
155
-
156
-
157
- rightクラス内pタグのみを指定し、同上の記述（結果も同上）
158
-
159
-
160
152
 
161
153
  画像５
162
154
 
163
- ![画像５](5bcc553de8e22fa6d8ecc748f062c22f.png)
155
+ ![画像５](78f14eba3280a4b66b5ce6032c7af2d7.png)

5

質問タイトル、内容の編集

2019/07/08 06:32

投稿

tetutetu
tetutetu

スコア419

test CHANGED
@@ -1 +1 @@
1
- position:fixedを使用すると背景が透過する
1
+ position:fixedと右寄せの併用ができない
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  サイト内全ページで共通のスタイルを持ったヘッダーを、ページ上部に固定、かつ指定した色の（今回は白）背景で持たせたい
6
6
 
7
- （ちょうどteratailのような動作をするヘッダーを作りたい）
7
+ →追加　上記機能、かつ文字、ボタンをを右寄せで表示したい。
8
8
 
9
9
 
10
10
 
@@ -15,6 +15,14 @@
15
15
  背景色が意図したとおり動作しており、ヘッダーが固定されていない状態で
16
16
 
17
17
  cssにposition:fixedを記述したところ、背景色が消える、右寄せが適用されない等の問題が発生した
18
+
19
+
20
+
21
+ 追記：
22
+
23
+ 背景色が消える問題に関しては解決したものの、文字列やボタンが左寄せになってしまう。
24
+
25
+ また、height次第で、中身の要素に上から被さる形になってしまう。
18
26
 
19
27
 
20
28
 
@@ -58,39 +66,27 @@
58
66
 
59
67
  ```jsp
60
68
 
61
- <html>
62
-
63
- <head>
64
-
65
- <meta charset="UTF-8">
66
-
67
69
  <link rel="stylesheet" href="./css/header_test.css">
68
70
 
69
- </head>
71
+ <header>
70
72
 
71
- <body>
73
+ <div class ="right">
72
74
 
73
- <header class="site-header">
75
+ <p>
74
76
 
77
+ ○○ さんでログインしています。
75
78
 
79
+ <input type="button"value="ログアウト">
76
80
 
77
- <p class="right">
81
+ <input type="button"value="メニューへ">
78
82
 
79
- ○○ さんでログインしています。
83
+ <input type="button"value="ヘルプ">
80
84
 
81
- <input type="button"value="ログアウト">
85
+ </p>
82
86
 
83
- <input type="button"value="メニューへ">
87
+ </div>
84
88
 
85
- <input type="button"value="ヘルプ">
86
-
87
- </p>
88
-
89
-
90
-
91
- </header>
89
+ </header>
92
-
93
- </html>
94
90
 
95
91
  ```
96
92
 
@@ -98,31 +94,19 @@
98
94
 
99
95
  ```css
100
96
 
101
- .header-class{
97
+ .right{
102
98
 
103
- /*position:fixed;*/
104
-
105
- background:white;
106
-
107
- }
108
-
109
-
110
-
111
- #header-id{
99
+ width:100%;
112
-
113
- background-color:white;
114
-
115
- }
116
-
117
- .right{
118
100
 
119
101
  float: right;
120
102
 
121
- /*position:fixed;*/
122
-
123
103
  right:0;
124
104
 
105
+ position:fixed;
106
+
125
107
  top:15px;
108
+
109
+ background-color:#FFFFFF;
126
110
 
127
111
  }
128
112
 
@@ -130,7 +114,7 @@
130
114
 
131
115
 
132
116
 
133
- ### 試したこと
117
+ ### 試したこと（背景色について、解決済と思われる）
134
118
 
135
119
 
136
120
 
@@ -140,21 +124,9 @@
140
124
 
141
125
  （これ以上スクロールすると枠が見えなくなるため、止めてあります。実際はこのままスクロールし続けると白枠が見えない状態（画像３と同じような状態）になります。
142
126
 
143
- 画像１
144
-
145
- ![画像１](ad28a2650033c153625b0c64fcebc79e.png)
146
-
147
- 画像２
148
-
149
- ![画像２](2a25a24e529701091425976c9a6581eb.png)
150
-
151
127
 
152
128
 
153
129
  →持たせた場合（画像３）、背景色が消え、ボタン類のみが上部に固定されて動きます。
154
-
155
- 画像３
156
-
157
- ![画像３](28fc6d70168bd518a0cf745a37d747ea.png)
158
130
 
159
131
 
160
132
 
@@ -164,16 +136,28 @@
164
136
 
165
137
  右寄せが解除されてしまう、さらに中身の要素に被さり、要素が一部見えなくなる（画像４）
166
138
 
167
- 画像４
168
-
169
- ![画像４](5e7672a568af33592d1991047df4aa78.png)
170
-
171
139
 
172
140
 
173
141
  ### 追記
174
142
 
175
- jQuery利用での方法を回答していただき、ローカルファイルの方へ反映、表示を行ったところ、ヘッダーが非表示になってしまっている状態です。（画像５）
143
+ ※画像１～４については、質問の追記に伴い本文長を削るため、削除させていただきました。
144
+
145
+
146
+
147
+ ### 試したこと（右寄せについて）
148
+
149
+ rightクラスに以下を記述（実行後画像５）
150
+
151
+ float: right;
152
+
153
+ right:0;
154
+
155
+
156
+
157
+ rightクラス内pタグのみを指定し、同上の記述（結果も同上）
158
+
159
+
176
160
 
177
161
  画像５
178
162
 
179
- ![画像５](78f14eba3280a4b66b5ce6032c7af2d7.png)
163
+ ![画像５](5bcc553de8e22fa6d8ecc748f062c22f.png)

4

回答を受け、質問に追記

2019/07/08 06:26

投稿

tetutetu
tetutetu

スコア419

test CHANGED
File without changes
test CHANGED
@@ -167,3 +167,13 @@
167
167
  画像４
168
168
 
169
169
  ![画像４](5e7672a568af33592d1991047df4aa78.png)
170
+
171
+
172
+
173
+ ### 追記
174
+
175
+ jQuery利用での方法を回答していただき、ローカルファイルの方へ反映、表示を行ったところ、ヘッダーが非表示になってしまっている状態です。（画像５）
176
+
177
+ 画像５
178
+
179
+ ![画像５](78f14eba3280a4b66b5ce6032c7af2d7.png)

3

必要ないものを削除

2019/07/08 05:56

投稿

tetutetu
tetutetu

スコア419

test CHANGED
File without changes
test CHANGED
@@ -57,14 +57,6 @@
57
57
  header_test.jsp（全ページで利用したいヘッダーのJSP）
58
58
 
59
59
  ```jsp
60
-
61
- <%@page import="org.apache.catalina.User"%>
62
-
63
- <%@ page language="java" contentType="text/html; charset=UTF-8"
64
-
65
- pageEncoding="UTF-8" import="java.util.List,model.entity.UserBean,java.io.IOException"%>
66
-
67
- <!DOCTYPE html>
68
60
 
69
61
  <html>
70
62
 

2

cssタグの挿入

2019/07/08 04:44

投稿

tetutetu
tetutetu

スコア419

test CHANGED
File without changes
test CHANGED
File without changes

1

position:fixedをコメントアウト

2019/07/08 04:43

投稿

tetutetu
tetutetu

スコア419

test CHANGED
File without changes
test CHANGED
@@ -108,7 +108,7 @@
108
108
 
109
109
  .header-class{
110
110
 
111
- position:fixed;
111
+ /*position:fixed;*/
112
112
 
113
113
  background:white;
114
114
 
@@ -126,7 +126,7 @@
126
126
 
127
127
  float: right;
128
128
 
129
- position:fixed;
129
+ /*position:fixed;*/
130
130
 
131
131
  right:0;
132
132