質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

850閲覧

divの開始位置がかぶってしまう問題について(position fixed)

chiko.unagi

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/04/17 16:26

前提・実現したいこと

isaraのホームページの模写コーディングを練習しています。
参考サイト
https://isara.life/

発生している問題・エラーメッセージ

headertop-wrapperの部分においてなのですが、たぶんposition:fixed
を用いているせいで、divの開始位置が重なってしまっています。

質問内容
1.なぜこのような重なりが生じてしまうのか
2.position:fixedを用いた状態で重なりをなくすにはどうしたらいいか。
もしくはposition:fixedの代用となるcssは存在するか。

以上の2点についてお聞きしたいです。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>isara</title> 8 <link rel="stylesheet" href="stylesheet.css"> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 10 integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 11</head> 12 13<body> 14 15 <div class="header"> 16 <div class="logo"> 17 <img src="images/isaralogo.png" alt="isara" width=128px height=44.65px> 18 <p>バンコクのノマドエンジニア育成講座</p> 19 </div> 20 21 <div class="access"> 22 <a href="#" class="access">お問い合わせ / 資料請求はこちら</a> 23 </div> 24 </div> 25 26 <!-- top-wrapper --> 27 <div class="top-wrapper"> 28 <div class="container"> 29 <div class="top-title1"> 30 <p>プログラミングで<br> 31 人生の安定を手にいれよう</p> 32 </div> 33 34 <img src="images/isaralogolarge.png" alt="" width=317px height=111px> 35 36 <div class="top-title2"> 37 <h1>バンコクのノマドエンジニア育成講座<br> 38 iSara[イサラ]</h1> 39 </div> 40 </div> 41 42 </div> 43 44 45 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 46 integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 47 crossorigin="anonymous"></script> 48 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 49 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 50 crossorigin="anonymous"></script> 51 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 52 integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 53 crossorigin="anonymous"></script> 54</body> 55 56</html>

css

1*{ 2 margin: 0px; 3 padding: 0px; 4} 5 6a{ 7 display: inline-block; 8 text-decoration: none; 9} 10 11.header{ 12 width:100%; 13 height: 75px; 14 display: flex; 15} 16 17.logo{ 18 display: flex; 19 height: 100%; 20 margin: 13px 0px 10px 43px; 21} 22 23.logo p{ 24 margin: auto 0 0 0; 25 margin-bottom: 33px; 26 margin-left: 10px; 27 font-size:14px; 28 font-weight:bold; 29 letter-spacing:2px; 30} 31 32 33 34.access { 35 margin: 0 0 0 auto; 36 margin-right: 50px; 37 display: flex; 38 align-items: center; 39 color: #ffffff; 40 font-size:14px; 41} 42 43/*border-radius :25px*/ 44 45.access a{ 46 padding: 11px 40px; 47 border-radius: 25px; 48 background: #da6b64; 49} 50 51.access a:hover{ 52 text-decoration:none; 53 background: #d84940; 54 color: #fff; 55} 56 57.top-wrapper{ 58 height: 500px; 59 background-image:url(images/top-wrapper.jpg); 60 background-size: cover; 61 background-position: center; 62 text-align:center; 63 64} 65 66 67.container{ 68 display: flex; 69 height: 100%; 70 flex-direction: column; 71 align-items: center; 72 justify-content: center; 73 74} 75 76.top-title1{ 77 font-size:28px; 78 font-weight:600; 79 margin-bottom: 7px; 80 line-height:55px; 81} 82 83.top-title2 h1{ 84 margin-top: 25px; 85 font-size:20px; 86 font-weight: bold; 87 line-height: 24px; 88 letter-spacing:2px; 89} 90 91 92

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

.header の高さと同じ値の padding-top を与えてからならないようにすればいいでしょう。

css

1.header{ 2 width:100%; 3 height: 75px; 4 display: flex; 5 position: fixed; /* 追加 */ 6} 7 8.top-wrapper{ 9 height: 500px; 10 background-image:url(images/top-wrapper.jpg); 11 background-size: cover; 12 background-position: center; 13 text-align:center; 14 padding-top: 75px; /* 追加 */ 15}

投稿2020/04/17 17:39

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chiko.unagi

2020/04/18 08:08

回答ありがとうございます。 実践してみたのですが、padding-top:75pxがなぜか反映されませんでした。cssのパス名のミスではなかったです。 marginも試してみましたが、marginをするとheaderごと下に下がってきてしまいました。 原因はお判りでしょうか?
chiko.unagi

2020/04/18 08:12

追記: paddingはtextのほうには反映していましたが、background-imageのほうに反映されていないようです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問