回到基础,我有一个情况,我有一个图像,需要出现在一个元素的背景正下方。但是,我不希望图像位于元素内容的顶部,而只希望元素(和背景属性)本身:
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背景的顶部[检查],但随后出现在黄色链接的后面,而不是。
最佳答案
在这里找到了我的“答案”(更多地证实了我的怀疑)。关键的一句话是“一旦你在测试1上设置了position:relative,你就会导致它的z-index与测试2的z-index处于不同的世界。”
似乎我有问题的原因是,一旦我设置了高于div的图像,不管我设置了什么z-index值到div的内容,它都会被覆盖。我不认为z索引是这样工作的,我认为所有的东西都是“独立的”,只要一个值高于其他地方的值(不考虑父容器),一切都会好的。