Question

我正在尝试使用z-index将图像叠加到我的网站主体上。我最近开始学习CSS并且已经阅读了所有关于Z-Index（ing）的教程，并且从未设法让它为我自己工作...我的网站的主体是图像大小900x500px我现在正在尝试将一些图像叠加到这个上我不想在没有CSS的情况下放入。我试图将z-index 0指向背景图像并将索引1指向前景，反之亦然，我试图改变图像上的位置以使它们工作但我仍然不能这样做。

网站在这里（尽管现在已经发生了很大变化）

http://tinyurl.com/7x7nzz3

我正在尝试将图像覆盖在图像body.jpg的顶部，该图片位于CSS表格内部

    #body-wrapper {
background-image: url(images/body.jpg);
background-repeat: repeat-y;
background-position: center;
    height: 550px;
width: 890;
opacity: 0.4;

}

我已从在线网站上删除了我失败的z-index尝试。

Answer 1

要使z-index生效，必须与position: ___;配对。

<强>参考

Adding z-index

Answer 2

我想你已经回答了自己的问题。你为什么要把背景图像放在Z轴上？

此外，你是对的，只有元素可以有Z-index，所以你在技术上可以做的是，在体内，有一个div包含所有东西，并有一个div的背景图像，这将工作。因为你基本上把div元素放在Z-index而不是图像上。

<style>
#content {
  background-image: url(images/body.jpg);
  position: [absolute:fix];
  z-index: xxx;
}
</style>

<body>
   <div id="content">
     Everything under the sun goes here
   </div>
</body>

Answer 3

z-index不适用于背景图像，但仅适用于图像元素，我认为它们也必须具有绝对（或固定）定位。背景图像不能定位在z轴上。

你可以play around with this here

Answer 4

是的，您必须添加一个位置才能使用z-index，尝试为背景添加负值，为前景元素添加更高的值。

Answer 5

这样的事情对你有用。

<强> HTML
如此布局你的HTML应该可以在不使用z-index而只使用position:absolute;的情况下工作，因为HTML的顺序会使img元素显示在其余内容的下方。

<div id="body-wrapper">
  <img src="#" alt="ALT" id="img1" class="overlays">
  <img src="#" alt="ALT" id="img2" class="overlays">
  <img src="#" alt="ALT" id="img3" class="overlays">
  <!-- CONTENT -->
</div>

<强> CSS
我在这里添加了z-index只是为了向您展示，但您不应该需要它。如果没有z-index，img元素应显示在其他内容下，因为它们位于HTML之前。如果img元素出现在#body-wrapper的最后，它们将显示在顶部。

#body-wrapper{
 position:relative;
 background-image: url(images/body.jpg);
 background-repeat: repeat-y;
 background-position: center;
 height: 550px;
 width: 890;
 opacity: 0.4;
 z-index:0;
}

.overlays{
position:absolute; //Set the position of img element because z-index needs positioning to work.
//other css
}

#img1{
  top:yourPosition;
  left:yourPosition;
  z-index:100;
}

#img2{
  top:yourPosition;
  left:yourPosition;
  z-index:200;
}

#img3{
  top:yourPosition;
  left:yourPosition;
  z-index:300;
}

当你开始搞乱z-index时，你几乎总是会让自己感到困惑，这通常会让这个过程变得更加复杂。我在下面有两个例子显示结果。然后第二个显示您正在寻找的结果的相反。

<img> elements first
<img> elements last

z-index无法按预期工作的麻烦

5 个答案: