Question

回到基础，我有一种情况，我有一个图像需要出现在它下面的元素的背景上。但是，我不希望图像超出该元素内容的顶部，只需要元素（和背景属性）本身：

http://jsfiddle.net/chricholson/4twr5/1/

HTML：

<img src="https://www.google.com/images/srpr/logo3w.png" />

<div>
    <a href="#">Hello World</a>
</div>

CSS：

img { position: absolute; z-index: 20; }

div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }

a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }

预期的行为是显示在div背景 [check] 顶部的图像，但随后显示在黄色链接的后面，而不是。

Answer 1

在Can't get z-index to work for div inside of another div找到我的“答案”（更多确认我的怀疑）。关键句是“一旦你设置位置：test_1上的相对，你导致它的z-index处于不同的世界而不是test_2的z-index。”

似乎我遇到问题的原因是因为一旦我将图像设置为高于div，无论我设置为div的内容的z-index值，它都将被覆盖。我不认为z-index像这样工作，我认为一切都是“独立的”，只要一个值高于其他地方的值（无论父容器如何），事情都会好的。

Answer 2

img { position: absolute; z-index: 15; }

div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; }

a {z-index: 30; padding: 10px; background: yellow; display: block; }

您可以尝试使用此代码。那么a是div的孩子。你不需要输入position：relative;因为你为div写了。

Answer 3

http://jsfiddle.net/4twr5/21/看看这个jsfiddle

根据评论http://jsfiddle.net/4twr5/22/

进行更新

Answer 4

将图像放入div中，如下所示：

<div>
    <img src="https://www.google.com/images/srpr/logo3w.png" />
    <a href="#">Hello World</a>
</div>

Answer 5

这里的大多数答案都指出了基本事实：在直接的HTML + CSS中，这可能只有在<img>位于<div>内且兄弟位于{{1 }}

由于您已表示无法更改HTML，因此您可以应用一个简单的JavaScript，根据需要为您重新排序DOM：<a>。（顺便说一句，这是JQuery。）这样做需要$('div').prepend($('img'));并将其作为<img>中的第一个孩子。

当然，如果你要在生产代码中使用它，你需要将id添加到元素中并选择关闭，否则你将无法将图像粘贴到div中。

这是JSFiddle demo。 JQuery被称为<div>。 HTML本身没有变化。

在背景元素的z索引图象

5 个答案: