Position relativ going over position Postition fixed

Question

I am making a website. It has a Navigation bar and a photo.

The navigation bar is posititon fixed with:

.leiste {
  background-color: #EBBA0E;
  height: 60px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  position: fixed;
  width: 100%;

and i also centered the image with:

#timg {
  position: relative;
  left: 25.5%;
}

html for the image:

              <tbody id="timg">
                <tr>
                  <th><button id="lbtn" class="ib"><</button></th>
                  <th><img src="Donut_gut.png" alt="Picture" id="mpic" width="700px"></th>
                  <th><button id="rbtn" class="ib">></button></th>
                </tr>
                <tr>
                  <hr>
                    <p id="ap"><a href="AnderePhotos.html" target="_blank">Für andere Phtotos drücken sie Hier.</a></p>
                  <hr>
                </tr>
              </tbody>

html for the navigation bar:

    <header>
      <nav class="leiste">
        <a href="https://www.youtube.com/" target="_blank"><img src="phot.png" alt="Logo" height="50px" class="Logo"></a>
        <ul class="leistelist">
          <li><a href="#infowebsite">Start</a></li>
          <li><a href="#infoich">Über Mich</a></li>
          <li><a href="#bilder">Galerie</a></li>
          <li><a href="#bod">Spiel</a></li>
          <li class="letzt"><a href="#kontakt">Kontakt</a></li>
        </ul>
      </nav>
    </header>

while i am scrolling, the image gets over the navigation bar. this doesnt happen if i position the image static but then it also doesnt get centered.

Is there any way to center without position absolute/relative. Or to fix this issue.