high z-index in low z-index - special navigation bar

I'm try to do a special navigation-bar.

I will show it in pictures:
this on scrollbar on top

and this on scrollbar down:

So I tried to do header with position: fixed and z-index: 1.

inside nav with z-index high(1000) and
the right block with z-index high(1000)
and the content have z-index: 2 and position: relative.

and it didn't worked :/

**and important thing is that I need the upload div will be in the header
and will be higher (in z-index) from content

I will try to show you in code:

header {
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  background-color: blue;

}
nav {
  width: 100%;
  height: 40px;
  background-color: green;
  z-index: 1000;
}
#upload {
  background-color: green;
  height: 40px;
  width: 40px;
  float: right;
  margin-right: 0;
  z-index: 1000;
}
#content {
  position: realative;
  display: block;
  border: 2px solid #000;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 80%;
  background-color: #cacaca;
  z-index: 2;
}

<header>
  <nav></nav>
  <div id="upload">
  </div>

</header>
<div id="content">
</div>

thank you,and I'm sorry about my english !!

Solution

you will need to move the nav out of the header for the #content z-index to work and need to align nav with fixed positioning or by giving margin

header {
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  background-color: blue;
  z-index: 1;
}
nav {
  width: 100%;
  height: 40px;
  z-index: 3;
  background-color: green;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
#upload {
  background-color: green;
  height: 40px;
  width: 40px;
  float: right;
  margin-right: 0;
  margin-top: 40px;
}
#content {
  position: relative;
  display: block;
  border: 2px solid #000;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 80%;
  background-color: #cacaca;
  z-index: 2;
}

<header></header>
<nav>
  <div id="upload"></div>
</nav>
<div id="content"></div>