メディアクエリの指定が効かない

実現したいこと

模写コーディング練習をしています。
モバイルファーストでベースのコーディングをして、メディアクエリを使ってPCでの表示形式を設定しようとしています。
key-visualのpaddingを消して、headerとkey-visualの隙間を無くしたいです。

問題点、エラーメッセージ

まず、モバイルファーストで、ベースのコーディングを組み立てたとき、最初はpadding-top60ｐｘを付けずに書いてしまいました。しかし、それだと画像の上60ｐｘ分がheader（height60ｐｘ）に隠れてしまっていたので、画像の親要素である＃key-visualにpadding-top60ｐｘを指定して画像をすべて見せることには成功しました。
→（質問1）なぜ、headerと画像の親要素div（#key-visual）はブロック要素にもかかわらず、headerに#key-visualがかぶって隠れてしまったのかわかりません。

次に、モバイルのcss記述が終わり、メディアクエリを用いてmin-width768pxのcssを指定しようとしました。headerのheightを80xにしたところ、先ほどの#key-visualのpadding-top60px分が、今度はheaderにかぶらす出現しました。従って、headerと画像の隙間が広くなった感じになりました。メディアクエリで#key-visualのpadding-topを0にしましたが、変化ありませんでした。
→（質問2）なぜ、メディアクエリで指定が効かないのでしょうか？

以下それぞれの画像

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="">
6    <meta name="author" content="">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" href="responsive.css">
10
11    <title>Colerfl-clover</title>
12    <link rel="shortcut icon" href=" ">
13  </head>
14
15  <body>
16    <header>
17      <div class="container">
18        <h1><a href="#" alt="colorful clover"><img src="image/logo.png"></a></h1>
19        <ul class="info">
20          <li ><a href="#">Information</a></li>
21          <li><a href="#">Gourmet</a></li>
22          <li><a href="#">Contact</a></li>
23        </ul>
24       
25    
26     </div>
27    </header>
28
29    <div id="key-visual">
30      
31      <div class="container">
32        <img src="image/img_bg.jpg">
33      </div>
34    </div>
35  </body>
36</html>
37

css
1@charset="UTF-8"
2
3/*
4html5doctor.com Reset Stylesheet
5v1.6.1
6Last Updated: 2010-09-17
7Author: Richard Clark - http://richclarkdesign.com
8Twitter: @rich_clark
9*/
10
11html, body, div, span, object, iframe,
12h1, h2, h3, h4, h5, h6, p, blockquote, pre,
13abbr, address, cite, code,
14del, dfn, em, img, ins, kbd, q, samp,
15small, strong, sub, sup, var,
16b, i,
17dl, dt, dd, ol, ul, li,
18fieldset, form, label, legend,
19table, caption, tbody, tfoot, thead, tr, th, td,
20article, aside, canvas, details, figcaption, figure,
21footer, header, hgroup, menu, nav, section, summary,
22time, mark, audio, video {
23    margin:0;
24    padding:0;
25    border:0;
26    outline:0;
27    font-size:100%;
28    vertical-align:baseline;
29    background:transparent;
30}
31
32body {
33    line-height:1;
34}
35
36article,aside,details,figcaption,figure,
37footer,header,hgroup,menu,nav,section {
38    display:block;
39}
40
41nav ul {
42    list-style:none;
43}
44
45blockquote, q {
46    quotes:none;
47}
48
49blockquote:before, blockquote:after,
50q:before, q:after {
51    content:'';
52    content:none;
53}
54
55a {
56    margin:0;
57    padding:0;
58    font-size:100%;
59    vertical-align:baseline;
60    background:transparent;
61}
62
63/* change colours to suit your needs */
64ins {
65    background-color:#ff9;
66    color:#000;
67    text-decoration:none;
68}
69
70/* change colours to suit your needs */
71mark {
72    background-color:#ff9;
73    color:#000;
74    font-style:italic;
75    font-weight:bold;
76}
77
78del {
79    text-decoration: line-through;
80}
81
82abbr[title], dfn[title] {
83    border-bottom:1px dotted;
84    cursor:help;
85}
86
87table {
88    border-collapse:collapse;
89    border-spacing:0;
90}
91
92/* change border colour to suit your needs */
93hr {
94    display:block;
95    height:1px;
96    border:0;  
97    border-top:1px solid #cccccc;
98    margin:1em 0;
99    padding:0;
100}
101
102input, select {
103    vertical-align:middle;
104}
105/*END Reset CSS*/
106body{
107  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
108}
109*{
110  box-sizing: border-box;
111}
112header{
113  height: 60px;
114  width:100%;
115  position: fixed;
116  background-color: white;
117}
118
119header .container{
120  width: 100%;
121  position: relative;
122}
123header .container h1{
124  display: inline-block;
125  height: 30px;
126  width: 200px;
127  margin: 0%;
128  position: absolute;
129  top: 20px;
130  left: 15px;
131}
132header .container h1 img{
133  width: 100%;
134}
135header .container ul{
136  display: inline-block;
137  list-style: none;
138  margin: 0%;
139  padding: 0%;
140  float: right;
141  visibility:hidden
142}
143
144div#key-visual{
145  width: 100%;
146  padding-top: 60px;
147}
148
149 #key-visual img{
150    width: 100%;
151    vertical-align: bottom;
152}
153
154body{
155  margin: 0%;
156  width: 100%;
157}
158

responsive
1@media (min-width:768px){
2  header{
3   height: 80px;
4   position: relative;
5  }
6  header .container h1{
7    width: 255px;
8    height:30px;
9    position: absolute;
10    top: 25px;
11    left: 20px;
12  }
13  #key-visual{
14    padding-top: 0px;
15  }
16}

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

回答2件

ベストアンサー

（質問1）なぜ、headerと画像の親要素div（#key-visual）はブロック要素にもかかわらず、headerに#key-visualがかぶって隠れてしまったのかわかりません。

headerがposition:fixedだからです。
固定位置指定 | position - CSS: カスケーディングスタイルシート | MDN

（質問2）なぜ、メディアクエリで指定が効かないのでしょうか？

sousukeさんのご回答の通りです。

投稿2020/10/06 05:26

Lhankor_Mhy

総合スコア36074

Sakupi

2020/10/06 14:56

回答、ありがとうございます！ positionーfixedを指定したらfloatした要素になるということですね！！リンク添付まで、ご丁寧にありがとうございます！

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

未検証ですが優先度で負けているからでは。
書き方統一しないと「下に書いたもので上書き」のルールにはなりませんよ。

css
1元
2div#key-visual{
3  width: 100%;
4  padding-top: 60px;
5}
6responsive側
7  #key-visual{
8    padding-top: 0px;
9  }

用語

正しくは「詳細度」ですね。
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

投稿2020/10/06 04:55

編集2020/10/06 04:59

sousuke

総合スコア3828

Sakupi

2020/10/06 14:58

回答、ありがとうございます！詳細度、知りませんでした、、！ css側のほうが表示される⇒詳細度が高い⇒詳細度の高い方が表示されるという理解で正しいでしょうか？

sousuke

2020/10/06 21:57

１．詳細度が高い方の指定が有効２．詳細度が同じなら後書きが有効になります。

Sakupi

2020/10/07 14:39

ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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