掲題の通り、ヘッダー要素がその下のメイン画像と被ってしまいます。
HTML
1<body> 2 3<!-- header --> 4<header class="header"> 5 <div class="inner"> 6 <img src="images/logo.png"> 7 <div class="header-btn"> 8 <a href="#">お問い合わせ/資料請求</a> 9 <p>※メールで相場をお知らせします!</p> 10 </div> 11 </div> 12</header> 13 14<!-- main --> 15<div class="main"> 16 <img src="images/nmain.svg" alt=""> 17 <div class="box"> 18 <a class="btn" href="#"#> 19 <p>無料査定する!</p> 20 </a> 21 </div> 22</div> 23 24 25<script src="script.js"></script> 26</body> 27 28</html>
scss
1// 変数 2$base-color: #038EC8; 3 4// header 5 6header { 7 height: 107px; 8 width: 100%; 9} 10 11.header { 12 background-color: #ffffff; 13 position: fixed;/*ボックスの配置方法(基準位置)を指定する。スクロールしても固定される。*/ 14 top:0;/*topにぴったりとくっ付く*/ 15 display: inline-block; 16 padding: 15px 50px; 17 z-index: 10;/*数が大きい方が上に表示される*/ 18} 19 20.inner { 21 background: #fff; 22 display: flex; 23 align-items: center; 24 justify-content: space-between; 25 margin: 0 auto; 26 padding-top: 15px; 27 width: 960px; 28 position: relative; 29 img { 30 position: absolute; 31 top: 60%; 32 left: 0; 33 vertical-align: bottom;/*縦方向の揃え位置を指定する※この場合は下揃え*/ 34 } 35 .header-btn { 36 position: absolute; 37 top: 60%; 38 right: 0; 39 width: 250px; 40 height: 44px; 41 border: 1px solid $base-color; 42 background-color: $base-color; 43 border-radius: 25px; 44 text-align: center; 45 display: inline-block; 46 &:hover { 47 background-color: rgba($base-color,0.5);//色の不透明度を指定する 48 } 49 a { 50 text-decoration: none;/*※下線を削除した*/ 51 color: #ffffff; 52 font-size: 2rem; 53 display: block;/*※オンマウスしたときに、どこにカーソル合わせても反応する*/ 54 height: 100%; 55 line-height: 44px; 56 } 57 p { 58 padding: 0.3rem 0 0 2rem; 59 text-align: left; 60 font-size: 1.3rem; 61 } 62 } 63} 64 65// main 66.main { 67 height: 100%; 68 position: relative; 69 .box { 70 position: absolute; 71 bottom: 12%; 72 left: 30%; 73 /* margin: 0 auto; */ 74 width: 39%; 75 height: 8%; 76 color: #666; 77 background-color: #f7f7f7; 78 border: 1px solid #f7f7f7; 79 border-radius: 34px; 80 display: flex; 81 align-items: center; 82 justify-content: center; 83 // text-align: center; 84 .btn { 85 margin: auto; 86 &:hover { 87 opacity: 0.5; 88 } 89 p { 90 color: #000000; 91 font-size: 2.8rem; 92 line-height: 5px; 93 } 94 } 95 } 96}
こちら何かコードに問題があるのでしょうか?
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/14 00:33