親要素の上に子要素を表示

cssにて横幅・高さ・色の設定をしていたのですが、どうしても親要素の下に子要素が来てしまいます。
正直、勉強を始めたばかりで、html・cssどちらが間違っているのかすらわかりません。
どなたか教えて頂けたら嬉しいです。

<html lang="ja"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="stayle.css" /> <title>sample</title> </head> <body> <div class="header"></div> <div class="header-top"></div> <div class="header-bottom"></div> </div> <div class="main-visual"></div> <div class="main-visual-content"></div> </div> <div class="main"></div> <div class="footer"></div> </body> </html>

{

margin: 0;
padding: 0;
box-sizing:border-box;
}

.header {
width: 100%;
height: 120px;
background-color:red;
}

.header-top {
width:100%;
height:70px;
background-color:hotpink;
}

.header-bottom {
width:100%;
height:50px;
background-color:pink;
}

.main-visual {
width:100%;
height:300px;
background-color:orange;
}

.main-visual-content {
width:350px;
height:300px;
background-color:gold;
}

.main {
width:100%;
height:1400px;
background-color:green;
}

.footer {
width:100%;
height:120px;
background-color:blue;
}

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

回答1件

ベストアンサー

そもそも意味が違うかもなので2通り書いておきます

一つ目

赤を下に、ピンクをしたから2番目に…としたいなら、要素の順番を入れ替えるのが一番早いと思います。

二つ目

先にコードを書いときます。
気になった点とか関係した覚えておいて損はないと思うことも下に書いてあるので、時間があるときによかったら読んでみてください。

どうしても気になること二つ
stayleはstyleでは？
cssの•は-がマークダウンで変換されたという解釈であっているか

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <link rel="stylesheet" href="stayle.css" />
6        <title>sample</title>
7    </head>
8    <body>
9        <div class="header"></div>
10        <div class="header-top"></div>
11        <div class="header-bottom"></div>
12        <div class="main-visual"></div>
13        <div class="main-visual-content"></div>
14        <div class="main"></div>
15        <div class="footer"></div>
16    </body>
17</html>

css
1-{
2    margin: 0;
3    padding: 0;
4    box-sizing:border-box;
5    }
6    
7    .header {
8    width: 100%;
9    height: 120px;
10    background-color:red;
11    z-index: 1;
12    }
13    
14    .header-top {
15    width:100%;
16    height:70px;
17    background-color:hotpink;
18    z-index: 2;
19    }
20    
21    .header-bottom {
22    width:100%;
23    height:50px;
24    background-color:pink;
25    z-index: 3;
26    }
27    
28    .main-visual {
29    width:100%;
30    height:300px;
31    background-color:orange;
32    z-index: 4;
33    }
34    
35    .main-visual-content {
36    width:350px;
37    height:300px;
38    background-color:gold;
39    z-index: 5;
40    }
41    
42    .main {
43    width:100%;
44    height:1400px;
45    background-color:green;
46    z-index: 6;
47    }
48    
49    .footer {
50    width:100%;
51    height:120px;
52    background-color:blue;
53    z-index: 7;
54    }

そもそも親要素と子要素の意味を間違えていませんか？

html
1<div><!-- 親要素 -->
2  <div><!-- 子要素 -->
3  </div>
4</div>

本来はこんな感じですが、

html
1<div><!-- 親要素 --></div>
2<div><!-- 子要素 --></div>

と勘違いしていませんか？
もしこのすぐ上に書いてあるようなコードだと

(css)

css
1.a{/*aは背景が黒！*/
2    background-color: black;
3    position: fixed;
4    width: 100px;
5    height: 100px;
6}
7.b{/*bはグレー！*/
8    background-color: gray;
9    position: fixed;
10    width: 500px;
11    height: 500px;
12}

のように下の方に書いたものが上にきます。もちろん順番を逆にすると順序も逆になります
また、二つ上のコードだと子要素の方が親要素より上にきます。(親要素と子要素を入れ替えると逆になります)

親要素と子要素の関係を保ったまま順序を逆にすることは恐らくですが、不可能なはずです
理由としては、z-indexは親要素に逆らえないからです。

html
1<div class="sample-1">
2    <div class="sample-1-1">
3    </div>
4</div>

css
1.sample-1{
2    height: 100px;
3    width: 100px;
4    z-index: 10;/*sample-1-1(子要素)よりも多い数を指定*/
5}
6.sample-2{
7    height: 150px;
8    width: 150px;
9    z-index: 0;
10}

これで一見できそうですが、子要素は親要素に逆らえないのでz-index: 0;は実質無意味で、親要素のz-index: 10;が適用されます。(厳密には違いますがこの認識で大丈夫です)
そしたらあとは子要素は親要素より上にくるので見えなくなるだけの簡単な話です。
次は

html
1<div class="a"></div>
2<div class="b"></div>

の場合の話ですが、これはちゃんとz-index通りに重なってくれます。
親要素や子要素の関係がないので。

それと</div>がいくつか多かったりタイピングミスをしていると思います
(間違っている箇所にコメントをつけておきます)

html
1<!DOCTYPE html><!-- これを最初に必ず書いてください -->
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <link rel="stylesheet" href="stayle.css" /> <!-- stayle.cssではなくstyle.cssでは？ それとファイルのパスをしっかり確かめて見てください -->
6        <title>sample</title>
7    </head>
8    <body>
9        <div class="header"></div>
10        <div class="header-top"></div>
11        <div class="header-bottom"></div>
12        </div><!-- ←の終了タグは不要 --> <div class="main-visual"></div>
13        <div class="main-visual-content"></div>
14        </div><!-- ←の終了タグは不要 --> <div class="main"></div>
15        <div class="footer"></div>
16    </body>
17</html>

投稿2022/11/17 12:11

退会済みユーザー

総合スコア0

yama104947485

2022/11/18 07:12

丁寧に教えて頂きありがとうございます！教えて頂いたコードを入力したら出来ました！誤字のご指摘までして頂きありがとうございました。 cssの(.)に関してはマークダウンではなく実際に入力していたものです。親要素や子要素に関しても認識を誤っていました。いま気づくことができて良かったです。本当にありがとうございました！

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