低z-index中的高z-index - 特殊导航栏

Question

我尝试做一个特殊的导航栏。

我会在照片中显示：
这个在上面的滚动条上

并在滚动条上显示：
this on scrollbar down http://i59.tinypic.com/ipyvcx.jpg

所以我尝试使用position: fixed和z-index: 1进行标题。

导航内z-index高（1000）和
 z-index高（1000）的右侧块  内容包含z-index: 2和position: relative。

它并没有奏效：/

**并且重要的是我需要上传div将在标题中 并且会更高（来自z-index）来自内容

我会尝试用代码向您展示：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

谢谢你，我对我的英语感到抱歉!!

Answer 1

您需要将nav移出header #content z-index才能正常工作，需要将nav与固定定位或给margin

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;