绝对定位 div 出现在一切之上

Question

我想要一个绝对位于其他所有内容之后的部分紫色背景。当我尝试这样做时，div 出现在我所有其他元素的顶部。有没有办法让 div 出现在所有内容的后面？我尝试使用 z-index 无济于事并查找了其他一些帖子，似乎没有任何效果。

h1 {
  text-align: center;
}

#topColor {
  width: 100%;
  height: 400px;
  background-color: #9546c1;
  position: absolute;
  top: 0px;
  right: 0;
  z-index=-1;
}

<body>
  <div id="headerWrapper">
    <h1><img class="centeredImage" src="http://via.placeholder.com/150x150" alt="Logo"></h1>
  </div>
  <div id="navWrapper"> </div>
  <div id="topColor"> </div>
  <br>
  <div id="navigation"></div>
</body>

Answer 1

这只是 css 语法中的一个错误，z-index = -1; 应该是 z-index: -1;

h1 {
  text-align: center;
}

#topColor {
  width: 100%;
  height: 400px;
  background-color: #9546c1;
  position: absolute;
  top: 0px;
  right: 0;
  z-index:-1;
}

<body>
  <div id="headerWrapper">
    <h1><img class="centeredImage" src="http://via.placeholder.com/150x150" alt="Logo"></h1>
  </div>
  <div id="navWrapper"> </div>
  <div id="topColor"> </div>
  <br>
  <div id="navigation"></div>
</body>

不过，您也可以使用 background-color。如果仅用于背景颜色，则不确定为什么需要使用 position:absolute 。只需将 height: 100%; 添加到 body 和 html，以及 #topColor

body,
html {
  height: 100%;
}

h1 {
  text-align: center;
}

#topColor {
  background-color: #9546c1;
  height: 100%;
}

<body>
  <div id="topColor">
    <div id="headerWrapper">
      <h1><img class="centeredImage" src="http://via.placeholder.com/150x150" alt="Logo"></h1>
    </div>
    <div id="navWrapper"> </div>
    <br>
    <div id="navigation"></div>
  </div>
</body>

Answer 2

伙计们，我发现出了什么问题，我只是在 CSS 中的 z-index 旁边放置了一个 = 运算符而不是 : 。

我在 Javascript 和 CSS 之间切换太频繁了。对不起大家发这个，我的错

绝对定位 div 出现在一切之上

absolute positioned div appearing above everything else

html

css

position

absolute