Question

我想要一个部分紫色背景，绝对落后于其他一切。当我试图做到这一点时，div出现在我所有其他元素之上。有没有办法可以让div出现在所有东西背后？我尝试使用z-index无济于事，并查找了其他一些帖子，似乎没什么用。

＆＃13;

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

＆＃13;

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

＆＃13;

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出现在其他一切之上

2 个答案: