スクロールした際にヘッダーが画像に隠れないようにしたい

ヘッダーをposition: sticky;で指定し、スクロールしても他のクラスなどに隠れることがないように
設定していたのですが、activity-wrapper内でホバーした際のzoom機能を追加すると、
画像がzoomしている間は、ヘッダーが下にきてしまうようになり改善させたいです。

トップページがフルスクリーン表示にしているため、
position:fixedやz-indexはヘッダー設定で使用しておりません。

お手数おかけしますが、画像ホバー時のzoomの際も
ヘッダーが一番上にくるように設定する改善策を教えていただけると幸いです。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="stylesheet" href="css/responsive.css">
12        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
13    </head>
14    <body>
15        <div id="top-wrapper">
16            <div class="container">
17                <img class="top-logo" src="ダミーダミーダミー" alt="トップイメージ">
18            </div>
19        </div>
20        <header>
21            <div class="container header-flexbox">
22                <div><a href="index.html"><img class="header-logo" src="ダミーダミーダミー" alt="ナビゲーションロゴ"></a></div>
23                <nav>
24                    <ul class="nav-main">
25                        <li><a href="#">ダミーダミーダミー</a></li>
26                        <li><a href="#">ダミーダミーダミー</a></li>
27                        <li><a href="#">ダミーダミーダミー</a></li>
28                        <li><a href="#">ダミーダミーダミー</a></li>
29                        <li><a href="#">ダミーダミーダミー</a></li>
30                        <li><a href="#">ダミーダミーダミー</a></li>
31                        <li><a href="#"><i class="fa fa-facebook-square fa-lg"></i></a></li>
32                    </ul>
33                </nav>
34            </div>
35        </header>
36        
37        <div class="activity-wrapper">
38           <div class="container">
39                <div class="heading">
40                    <h2>ダミーダミーダミー</h2>
41                </div>
42                <div class="activity-flexboxContainer">
43                    <div class="activity-flexbox"><!--ここからホバー時のzoom箇所-->
44                        <figure>
45                        <img class="activity-image" src="ダミーダミーダミー" alt="">
46                        </figure>
47                        <h3>ダミーダミーダミー</h3>
48                        <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
49                    </div>
50                    <div class="activity-flexbox">
51                        <figure>
52                        <img class="activity-image" src="ダミーダミーダミー" alt="">
53                        </figure>
54                        <h3>ダミーダミーダミー</h3>
55                        <img class="activity-mark mark-space" src="ダミーダミーダミー" alt="">
56                    </div>
57                    <div class="activity-flexbox">
58                        <figure>
59                        <img class="activity-image" src="ダミーダミーダミー" alt="">
60                        </figure>
61                        <h3>ダミーダミーダミー</h3>
62                        <img class="activity-mark" src="ダミーダミーダミー" alt="">
63                    </div>
64                    <div class="activity-flexbox">
65                        <figure>
66                        <img class="activity-image" src="ダミーダミーダミー" alt="">
67                        </figure>
68                        <h3>ダミーダミーダミー</h3>
69                        <img class="activity-mark" src="ダミーダミーダミー" alt="">
70                    </div>
71                </div>
72               <div class="more-btn">
73                   <a class="message-more" href="#">ダミーダミーダミー</a>
74               </div>
75            </div>
76        </div>
77        
78    </body>
79</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22}
23#top-wrapper {
24    min-height: 100vh;
25    background-image: url(ダミーダミーダミー);
26    background-size: cover;
27    background-position: center top;
28    background-repeat: no-repeat;
29}
30.top-logo {
31    position: absolute;
32    top: 50%;
33    left: 50%;
34    width: 20%;
35    -webkit-transform: translate(-50%, -50%);
36    -moz-transform: translate(-50%, -50%);
37    transform: translate(-50%, -50%);
38    z-index: 100;
39}
40header {
41    height: 80px;
42    width: 100%;
43    background-color: #fff;
44    position: sticky;
45    top: 0;
46    box-shadow: 0 1px 5px #DCDDDD;
47}  
48.header-flexbox {
49    display: flex;
50    justify-content: space-between;
51}
52.header-logo {
53    width: 55px;
54    margin-top: 13px;
55}
56.nav-main {
57    display: flex;
58    list-style: none;
59    margin-top: 27px;
60    font-size: 1rem;
61    text-transform: uppercase;
62}
63.nav-main li {
64    margin-left: 50px;
65    letter-spacing: 5px;
66}
67.fa {
68    color: grey;
69    vertical-align: -1px !important; 
70}
71.nav-main a { 
72    color: #000;
73    position: relative;
74    display: inline-block;
75    
76}
77.nav-main a::after {
78    position: absolute;
79    bottom: -10px;
80    left: 0;
81    content: '';
82    width: 100%;
83    height: 1px;
84    background: #333;
85    transform: scale(0, 1);
86    transform-origin: right top;
87    transition: transform .3s;
88}
89.nav-main a:hover::after {
90    transform-origin: left top;
91    transform: scale(1, 1);
92}
93.nav-main li:last-child a::after {
94    display: none;
95}
96.activity-wrapper {
97    background-color: #f7f7f7;
98    padding: 100px 0;
99    text-align: center;
100}
101.activity-flexboxContainer {
102    padding-top: 45px;
103    display: flex;
104    flex-wrap: wrap;
105    justify-content: space-between;
106}
107.activity-flexbox { /*ここのpadding設定は残したい*/
108    padding: 0 10px;
109}
110.activity-flexbox figure { /*ホバー時のzoom設定*/
111    overflow:hidden;
112    margin: 0 auto;
113    width: 540px;
114    height: 320px;
115}
116.activity-image { /*ホバー時のzoom設定*/
117    width: 100%;
118    height: 100%;
119    object-fit: cover;
120    transition:1s all;
121}
122.activity-flexbox h3 {
123    padding-top: 15px;
124    font-size: 16px;
125    letter-spacing: 5px;
126}
127.activity-image:hover { /*ホバー時のzoom設定*/
128    transform:scale(1.2,1.2);
129    transition:1s all;
130}
131.activity-mark {
132    width: 50px;
133    padding-top: 15px;
134    display: block;
135    text-align: left;
136}
137.mark-space {
138    padding-bottom: 65px;
139}
140

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

回答1件

ベストアンサー

header に z-index を適切に設定すればいいのでは。

css
1header {
2    height: 80px;
3    width: 100%;
4    background-color: #fff;
5    position: sticky;
6    top: 0;
7    box-shadow: 0 1px 5px #DCDDDD;
8    z-index: 2; /* 追加 */
9}