Why the picture displays on sticky header?

The picture is on header while scrolling but it should be "under it" like some other navs do.

The picture:

.nav3{
float:right;
height:820px;
margin:2px; }


.waterfall {
position: relative;
left:-20%; bottom: 100%; }

<nav class="nav3">
<img class="waterfall" src="../Szablony 3/wodospad.jpg">
</nav>

The sticky element:

 <header id="header1">

#header1 {
height: 50px;
width: 100%;
background-color:black;
position:sticky ;
top: 0;

>Solution :

Set z-index on navbar to something high.

#header1 {
height: 50px;
width: 100%;
background-color:black;
position:sticky ;
top: 0;
z-index: 1000;
}