CSS:如何将背景图片放在前面？

Question

我已经在看 CSS: How to make background-image above background-color in a list并尝试了 !important 属性但没有成功。

我有this示例页面，我想将我用作背景图像的黄皮书封面放在下面的导航栏前面。

我使用的代码如下:

.home-link {
  background: url(http://www.mensch-jinn-dajjal.net/wp-content/uploads/2013/12/Buchtitel.gif) no-repeat !important;
  background-size: 180px 200px !important;
  background-position: 400px 80px !important;
  z-index: 99999 !important;
}

知道为什么它没有出现在前面吗？

我还尝试为导航栏分配负 z-index 但没有成功。

Answer 1

z-index 在这种情况下不起作用； z-index 适用于那些堆叠在一起的元素，即它们的顶部和左侧重叠，这不是您的情况。Html 正在按照它应有的方式工作，即流式布局，

这是您网站上的标记:

<header id="masthead" class="site-header" role="banner">
     <a class="home-link" href="...</a> <-- Link containing the image-->
     <div id="navbar" class="navbar"> <!-- navigation bar -->
    </div><!-- #navbar -->
</header>

显然，您的 anchor 和导航栏是一个接一个放置的，它们的呈现方式完全一样。

所以，如果你想重叠你的图像，你需要让你的图像position:absolute。我会建议，创建一个独立的 img 标签并使其绝对定位并将其准确放置在您想要的位置，相对顶部和左侧，以便它根据分辨率自行调整。

请看这个 z-index 的简单图示:jfiddle

在这里，我们有四个 float:left, position:absolute 部分，默认情况下，当没有给其中任何一个 z-index 时，最后一个出现的部分流量是可见颜色，但是当您为其中任何一个(示例中的第一个)提供更高的 z-index 时，它就会变成可见颜色