position:fixed;について

isaraのサイトを模写しているのですが、ヘッダーを固定した時に（CSS二行目のposition:fixed;）デザインが崩れてしまいます。要素が重なり右に寄せていたはずの、「お問い合わせ/資料請求」の蘭も左によってしまいます。どうにもできない状況です。どなたか解説して頂けると助かります。

HTML
1<!DOCTYPE html>
2
3<html lang="ja">
4	<title></title>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width,initial-scale=1.0">
7   <link rel="stylesheet" href="isara.css">
8	</head>
9
10	<body>
11		<header>
12			<div class="hed-logo">
13				<img src="isaralogo (1).png">
14				<p>-バンコクのノマドエンジニア育成講座-</p>
15				<div class="hed-info">
16					<p><a href="#">お問い合わせ/資料請求はこちら</a></p>
17				</div>
18			</div>
19		</header>
20			<div class="fast-peage">
21				<div class="isara-top">
22					<p>プログラミングで</p>
23					<p>人生の安定を手に入れよう</p>
24				</div>
25				<div class="fast-peage-logo">
26					<img src="isaralogolarge.png" alt="サイトロゴ">
27				</div>
28				<h1>
29					<p>バンコクのノマドエンジニア育成口座<br>
30						iSara[イサラ]
31					</p>
32				</h1>
33				
34			</div>
35
36
37			<p>まずは２０日間で、月１０万円稼げるスキルを手に入れよう。</p>
38			<p>※受講料金は実質０円です。詳しくは資料請求をどうぞ。</p>
39			<div class="info-lage">
40				<a href="#">お問い合わせ/資料請求はこちら</a>
41			</div>
42			<div class="recruiting">
43				<p>第６期生：2019年11月25日 ~ 2019年12月14日
44					＊締め切りました</p>  
45				<p>第６期生：2019年11月25日 ~ 2019年12月14日
46					＊締め切りました</p>      
47				<p>第６期生：2019年11月25日 ~ 2019年12月14日
48					＊締め切りました</p>
49			</div> 
50  
51
52
53	</body>
54	<footer>
55
56	</footer>
57
58</html>ード

CSS
1/* ヘッダー */
2body {
3	font-size: 16px;
4}
5header {
6	position: fixed;
7}
8
9.hed-logo img {
10	width:128px;
11	height:44.6px ;
12	vertical-align: bottom;
13}
14
15.hed-logo p {
16	display: inline;
17	font-size: 14px;
18	font-weight: 600;
19}
20
21.hed-info {
22	background-color:#da6b64;
23	position: absolute;
24	right: 0;
25	top: 16px;
26	padding:11px 40px;
27	border-radius:25px;
28	cursor: pointer;	
29	width: 267px;
30	text-align: center;
31	
32}
33.hed-info a {
34	font-size:14px ;
35	color: white;
36	text-decoration: none;
37	font-weight: 500;
38}
39.hed-info:hover {
40	background-color: brown;
41}
42
43/* ヘッダー */
44
45/* ヘッダー画像 */
46.fast-peage {
47	background-image:url(main.jpg) ;
48	background-size: cover;
49	height: 500px;
50	text-align: center;
51	padding-top: 100px;
52	line-height:30px;
53	/* display: block; */
54}
55
56.fast-peage img {
57	width: 317px;
58	height: 111px
59}
60
61.fast-peage p {
62 font-size: 20px;
63 font-weight:600;
64 height: 44px;
65 margin: 0;
66}
67
68.isara-top p {
69	font-size: 24px;
70}
71
72/* ヘッダー画像 */

行動規範の内容に同意します

回答1件

ベストアンサー

こちらで解決しそうですが、いかがでしょうか?

CSS
1header {
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6}

投稿2020/04/21 12:20

new1ro

総合スコア4528

kaji120

2020/04/21 12:48

有難うございます。見事に解決したのですが、簡単な解説を頂く事は可能でしょうか？

new1ro

2020/04/21 20:14 編集

position: fixed;を指定した要素にとって top、right、bottom、leftは、画面の外周に対する上端、右端、下端、左端の位置です。 top: 0;は画面の上辺にheaderの上端がくっつく left: 0;は画面の左辺にheaderの左端がくっつく right: 0;は画面の右辺にheaderの右端がくっつくその際、横幅や高さは自動で調整されます。 (右端の余白がなくなったのはそのためです。) 試しに、bottom: 0;を指定してみると、heightが自動で調整され、画面全体をヘッダーが覆ってしまうと思います。

kaji120

2020/04/23 15:17

遅くなり申し訳ございません。ご返信有難う御座います。 position:flexed;を使用するとヘッダーの要素が縮んでしまうので、それを０で指定する事で、外周からの距離がなくなり、要素が元どおりになるという解釈であってますでしょうか。ちなみにbottom:0;を指定しましたが、ヘッダーが伸びて？画面が真っ白になりました！

行動規範の内容に同意します