ヘッダーを固定してスクロールしたら他の要素と重なってしまう。

前提・実現したいこと

模写コーディングをしています。
ヘッダーを固定したところエラーが発生しました。

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

ヘッダーを固定しz-indexを指定してスクロールしたら一部は反映されたが、一部は反映されずほかの要素と重なってしまう。

該当のソースコード

html
1<div class="page-header__inner">
2            <div class="page-header__logo">
3            <img src="C:\Users\" alt="">
4            <p>ユアコーディング</p>
5            </div>
6            <nav class="page-header__nav">
7                <ul class="page-header__list">
8                    <li class="page-header__block"><a href="#">特徴</a></li>
9                    <li class="page-header__block"><a href="#">価格</a></li>
10                    <li class="page-header__block"><a href="#">お問い合わせ</a></li>
11                </ul>
12                <p class="page-header__form"><a href="#">お問い合わせ</a></p>
13
14            </nav>
15
16        </div>

css
1.common-inner{
2    margin: 0 auto;
3    background-color: #ffffff;
4    padding: 70px 0;
5}
6
7.page-header{
8    background-color: #ffffff;
9}
10
11.page-header__inner{
12    display: flex;
13    align-items: center;
14    justify-content: space-between;
15    box-shadow:0 2px 4px gray ;
16    height: 94px;
17    position: fixed;
18    top: 0;
19    left: 0;
20    z-index: 10;
21    width: 100%;
22}
23
24.page-header__logo{
25    display:flex;
26    padding-left: 190px;
27    
28
29}
30
31.page-header__logo img{
32    height: 47px;
33    width: 47px;
34    
35
36}
37
38.page-header__logo p{
39    font-size: 24px;
40    color: #333333;
41    padding-left: 20px;
42    padding-top: 3px;
43    
44}
45
46
47
48
49
50.page-header__nav{
51    display: flex;
52    align-items: center;
53}
54
55.page-header__list{
56    display: flex;
57    padding-right: 50px;
58
59    
60
61}
62
63.page-header__block:not(:last-child){
64    margin-right: 42px;
65
66}
67
68
69
70.page-header__block a{
71    font-size: 16px;
72    color: #333333;
73    font-family: ヒラギノ角ゴ ProN,W6;
74}
75
76.page-header__block a:hover{
77    text-decoration: underline;
78}
79
80.page-header__form{
81    padding-right: 193px;
82    
83}
84
85.page-header__form a{
86    font-size: 14px;
87    color: #ffffff;
88    display: inline-block;
89    background: linear-gradient(90deg, #FA41CC 0%, #6020B0 100%) 0% 0% no-repeat padding-box;
90    margin-left: 100px;
91    border-radius:10px ;
92    padding: 5px 15px;
93    
94}

試したこと

z-indexの調整など試してみたが駄目だった。

補足情報（FW/ツールのバージョンなど）

なし

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

回答1件

ベストアンサー

あまり適切でも正確とも言えない説明になりますが、
z-indexは、より先祖にあたる要素に適用することで、思った挙動になることがあります。
取り出されたコードから全体を推し量ることはできないのですが、見える範囲での回答をするなら、

CSS
1.page-header{
2    background-color: #ffffff;
3}
4
5.page-header__inner{
6    display: flex;
7    align-items: center;
8    justify-content: space-between;
9    box-shadow:0 2px 4px gray ;
10    height: 94px;
11    position: fixed;
12    top: 0;
13    left: 0;
14    z-index: 10;
15    width: 100%;
16}

となっている部分を

CSS
1.page-header{
2    background-color: #ffffff;
3    box-shadow:0 2px 4px gray ;
4    height: 94px;
5    position: fixed;
6    top: 0;
7    left: 0;
8    z-index: 10;
9    width: 100%;
10}
11
12.page-header__inner{
13    display: flex;
14    align-items: center;
15    justify-content: space-between;
16}