为什么文本出现在具有高z-index的图像上方

Question

如果您将鼠标移到此jsfiddle上的图像上，它不会与其周围的文本重叠。

相当愚蠢的问题，但我很困惑，有人可以帮助我吗？

http://jsfiddle.net/wdhf2/

图片有这个css：

.img {
    height:30px;
    -webkit-transition-duration:0.5s;
    transition-duration:0.5s;
    margin-bottom:0px;
    margin-right:0px;
    z-index:100000000;
}
.img:hover {
    height:300px;
    margin-bottom:-270px;
    margin-right:-270px;
}

Answer 1

z-index只能应用于定位元素。在绝对定位之后，这里有一个覆盖所有文字的图像的小提琴：http://jsfiddle.net/hb8f2/。使用position: relative或position: fixed也允许应用z-index。

.img {
    position: absolute;
}