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

Question

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

我会用图片展示它：
这个在顶部的滚动条上

这在向下滚动条上：

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

在导航中使用z-index high(1000) 和
z-index high(1000)
并且内容有z-index: 2和position: relative。

它没有用：/

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

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

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>

谢谢你，对不起我的英语！！

Answer 1

您需要将nav 移出header 以使#content z-index 工作，并且需要将nav 与固定位置对齐或通过提供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>