Question

这是我的代码：

    body {
        background: #ffc04c url("bark_360.jpg");
        background-repeat: repeat-y;
        z-index: 0;
    }

    img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -2;
    }
    </style>  
    <img src="goleafs.png" style="Padding-Left: 130px">

因为你可以看到img是与背景相比较低的z-index ....但是当我刷新时它仍然在顶部。请帮帮我。

Answer 1

TLDR：你不能落后于你的父母。

在DOM中你的zIndex不可能比父母更低，你需要做的是创建一个包含背景图像的div，这样你的图像就可以落后了：

<img src="goleafs.png" style="Padding-Left: 130px">
<div class="bg"></div>

CSS：

.bg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #ffc04c url("bark_360.jpg");
}

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -2;
}

Answer 2

img位于body的内部，因此它位于body的背景之上。要实现您想要的目标，您应该有两个单独的img个，一个用于背景，一个用于实际图像。

尝试类似：

<html>
  <head>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <img src="url('bark_360.jpg')">
    <img src="url('goleafs.png')">
  </body>
</html>

为什么使用z-index不让我把我的图像放在后台？

2 个答案: