绝对定位的 div 出现在其他所有内容之上[关闭]答案

【问题标题】：absolute positioned div appearing above everything else [closed]绝对定位的 div 出现在其他所有内容之上[关闭]
【发布时间】：2018-03-07 14:08:51
【问题描述】：

我想要一个部分紫色背景，它绝对位于其他所有内容的后面。当我尝试这样做时，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>

【问题讨论】：

为什么不改用background-color？真的需要position:absolute吗？
天哪，我写了这么多 javascript 却没有意识到我用 = 而不是 : 非常感谢
这在 F 中如何被认为是题外话？这不是代码问题吗？

标签： html css position absolute

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：