タイトル通り、「position: fixed」を指定した要素の直下のmarginの挙動が理解できずに困っています。
「position: fixed」を指定する前は①の画像のように全く問題は無かったのですが、それを指定した途端に画像②のようにレイアウトが崩れてしまいました。
デベロッパーツールで確認してみた所、③の画像のようにh1で指定したmarginが意図した挙動ではなく、何故か背景ごと移動してしまっているような感じです。
自分ではイマイチ解決策が見いだせず、質問させていただきました。
①の画像のレイアウトを保ったまま「position: fixed」にするにはどうすれば良いでしょうか?
皆様、ご教授よろしくお願いいたします。
長くなってしまって申し訳ありませんが、該当箇所のコードは一応全て貼らせていただきます。
HTML
1<header> 2 <div class="header-navi"> 3 <img src="img/mylogo.png"> 4 <nav> 5 <ul> 6 <li><router-link to="/top">TOP</router-link></li> 7 <li><router-link to="/about">ABOUT</router-link></li> 8 <li><router-link to="/skills">SKILLS</router-link></li> 9 <li><router-link to="/works">WORKS</router-link></li> 10 </ul> 11 </nav> 12 </div> 13 <h1>Taku's</h1> 14 <h2>portfolio site</h2> 15 <p>Welcome to my site!</p> 16 <div class="down"> 17 <a href="#landing" class="button-sizing"><i class="fas fa-angle-down"></i></a> 18 </div> 19</header>
あとCSSにはこのサイトのreset cssを一番最初に読み込んでいます。http://html5doctor.com/html-5-reset-stylesheet/
CSS
1.center-wrapp { 2 display: flex; 3 flex-direction: column; 4 justify-content: center; 5 align-items: center; 6} 7 8.button-sizing { 9 display: block; 10 width: 100%; 11 height: 100%; 12} 13 14header { 15 width: 100%; 16 height: 100vh; 17 font-family: 'Orbitron', sans-serif; 18 color: #ffffff; 19 text-shadow: 1px 2px 3px #1d1d1d; 20 background: linear-gradient(135deg, rgba(10, 19, 255, 0.6), rgba(0, 195, 230, 0.6)),url("../img/header-image3.jpg"); 21 background-size: cover; 22 23} 24 25.header-navi { 26/* 27 position: fixed; 28 z-index: 999999; 29 top: 0; 30*/ 31 width: 100%; 32 height: 60px; 33 background-color: rgb(255, 255, 255, 0.9); 34 display: flex; 35 justify-content: center; 36} 37 38header img { 39 border-radius: 50%; 40 margin-right: 200px; 41 width: 60px; 42 height: 60px; 43} 44 45nav ul { 46 margin: 0 auto; 47 display: flex; 48} 49 50nav li { 51 width: 200px; 52 line-height: 60px; 53 font-size: 20px; 54 font-weight: bold; 55 text-shadow: none; 56/* border-bottom: 2px solid #ffffff;*/ 57} 58 59nav li:hover { 60 background-color: rgb(255, 255, 255, 1); 61 transition: 0.8s; 62} 63 64nav a { 65 display: block; 66 width: 100%; 67 height: 100%; 68 color: black; 69} 70 71header h1 { 72 margin: 200px auto 80px; 73 font-size: 85px; 74 letter-spacing: 0.2em; 75} 76 77header h2 { 78 margin: 50px auto 30px; 79 font-size: 40px; 80 letter-spacing: 0.3em; 81} 82 83header p { 84 font-size: 20px; 85 margin: 200px auto 30px; 86 cursor: pointer; 87} 88 89.down { 90 margin: 0 auto; 91 width: 40px; 92 height: 40px; 93 border-radius: 50%; 94 border: 1px solid white; 95} 96 97.down:hover { 98 background-color: white; 99 color: rgb(9, 63, 209, 0.9); 100 transform: scale(0.9); 101 transition: 0.8s; 102} 103 104.down i{ 105 height:40px; 106 width: 40px; 107 color: white; 108 font-size: 30px; 109 line-height: 40px; 110 text-shadow: none; 111} 112 113.down i:hover { 114 color: rgb(9, 63, 209); 115}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/29 07:04 編集