Question

我遇到以下情况：

<html>
  <head>
    <title>
      Title
    </title>
    <style type="text/css">
      #wrapper {
        width: 100%;
      }

      #thingy {
        position: absolute;
        top: 20px;
        background-image: url("bg.png");
        width: 100%;
        height: 4px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <img src="test.png" alt=""/>
      <div id="thingy">&nbsp;</div>
    </div>
  </body>
</html>

test.png 是同一张图片， bg.png 是1x4背景图片。

问题是：元素#thingy显示在图像的前面，因此一条直线穿过图像。这不应该发生，＃thingy应该显示在图像后面。使用z-index不会做任何事情......

任何提示？

谢谢，斯特

编辑：更多细节：目标是获得一个标题横幅（ test.png高于），其下方有一条水平线。该行必须跨越标题区域的整个宽度（因此宽度：100％），横幅必须保持居中。

Answer 1

在图像上声明position: relative并为其提供z-index可以纠正行为。见下文：

#thingy {
    position: absolute;
    top: 50px;
    background-image: url("bg.png");
    width: 100%;
    height: 4px;
    z-index: 1;
}

#wrapper img {
    position: relative;  
    z-index: 2500;
}

Answer 2

肯定“thingy”显示在图像的前面，因为它具有绝对位置。 z-index在这种情况下无法帮助，因为图像定位为静态而z-index对它没有影响。

我不知道你想要实现什么，但是当你将图像定位为绝对时，那么z-index也能正常工作。

编辑：对你的问题的编辑现在更清楚你想要什么。你为什么不把你的背景图像放在包装纸的背景图像中？如果需要定位到背景位置。然后，您将图像置于包装中心，您就完成了。在你的情况下，你需要“thingy”div。

Answer 3

应用z-index并将位置设置为图像：

#wrapper img {
    z-index: 100;
    position: relative;
}

#thingy {
    z-index: 99;
}

Answer 4

我认为你正在寻找这个;

http://jsfiddle.net/mtariq/xmYpq/

CSS：图像前面的背景 - 如何预防？

4 个答案: