상단에 고정시킨메뉴 fixed 위에 이미지를 띄웠다 없앴다 하려하는데요.. 채택완료

제가 원하는건 아래화면인데... 도움주신 소스는 자꾸 겹치는것같은데요..

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 75px;
    padding: 1rem;
    color: white;
    background: teal;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* 추가 */
  }

  /* ... (기존 스타일 코드) ... */

  /* 추가 스타일 */
  #view img {
    position: absolute;
    top: 50%; /* 이미지를 수직 가운데로 위치시킴 */
    left: 50%; /* 이미지를 수평 가운데로 위치시킴 */
    transform: translate(-50%, -50%); /* 이미지의 중심을 기준으로 정렬 */
    z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */

  }
</style>

<script>
  function view_close() {
    const viewDiv = document.getElementById('view');
    viewDiv.style.display = 'none';
  } 
</script>

<header>

<div id="view">
  <a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg" width="100%"></a>
</div>

  <h1>고정메뉴</h1>
  <nav>
    <span>Menu1</span>
    <span>Menu2</span>
    <span>Menu3</span>
  </nav>
</header>

<main>
  <p style="height:3000px">This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>

</main>   

고정된 메뉴위에 이미지를 넣으려고하는것입니다.

아래사진보시면 고정메뉴 위에 배너가 있어야합니다.

그런데 배너를 클릭하면 배너가 사라지기때문에  top: 0px; 이걸로 조정하기가 어려워서

어떻게 다른방법이 있는건지 찾아보고 있습니다.

말씀해주신대로 넣었는데.. 아래처럼나오는데요...

<style>
header {
  position: fixed;
  top: 200;
  left: 0;
  right: 0;
  z-index: 1;
  
  height: 75px;
  padding: 1rem;
  color: white;
  background: teal;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h1, p {
  margin: 0;
}

main {
  padding: 1rem;
  height: 100%;  
}

body {
  background: #EEE;
}

body, html {
  height: 200%;
}

* {
  box-sizing: border-box;
}

  /* ... (기존 스타일 코드) ... */

  /* 추가 스타일 */
  #view img {
    position: fixed;
    top: 100px; /* 이미지가 고정 메뉴 아래에 위치하도록 조정 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
  
  }
</style>

<div id="view">
  <a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>

<script>
  function view_close() {
    const viewDiv = document.getElementById('view');
    viewDiv.style.display = 'none';
  } 
</script>

<header>

  <h1>고정메뉴</h1>
  <nav>
    <span>Menu1</span>
    <span>Menu2</span>
    <span>Menu3</span>
  </nav>
</header>

<main>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
  <p>This is the main area.</p>
</main>